Im trying to remove an eventlistener that I initialize somewhere in the code and then remove later in a function. I know that you have to remove the same listener that you initialized, but it doesnt seem to be working. I store the eventlistener in a variable that I believe has global scope, so Im not sure what the issue is. The eventlistener itself works fine, and starts as expected.
I have also tried not storing the eventlistener in a variable but that didnt work either.
mainFunction = function (){
mousee = document.addEventListener('mouseout', mouseEvent);
if ($(".message_input").val().replace(/\s/g, "").length > 0){
unbindAll(true); // unbind all functions
message = getMessageText(); // retrieve the users message text
$(".message_input_wrapper").html("");
printMessage(message, "right"); // display there message on the screen
if (message=="stop"){
document.removeEventListener(mousee);
initiateStopSection();
} else {
//async_elipsis();
response = async_bot(message);
};
};
};
Just for clarification, I was initially using
document.removeEventListener("mouseout", mouseEvent)
but it wasnt working
When using removeEventListener, you have to pass the event type and the event handler, so in this case you would use
document.removeEventListener("mouseout", mouseEvent)
removeEventListener takes 2 arguments. The first is the event you are trying to target, in this case mouseout, and the second is the function you wish to remove.
For your example it would be this:
document.removeEventListener("mouseout", mouseEvent)
There is no need to set the initial listener to a variable with this implementation.