Remove event listener that was created inside of a function? (JavaScript)

Question

I'm trying to remove an event listener that was created inside of a function, but for some reason, it isn't working. It works fine if I take it out of the function. Example below:

<body>
<div id='myDiv'></div>
<button type='submit' onclick='rel()'>RemoveEventListener</button>

<script>
function Mouse() {
    myDiv.addEventListener('click', cK);
    function cK() {
        alert('You've clicked on myDiv!');
    }
}
function rel() {
    myDiv.removeEventListener('click', cK);
}
Mouse();
</script>
</body>

How do you get reference to your myDiv component? Do you use same ref for removing? — VadimB
– VadimB, Commented Dec 29, 2016 at 12:51
I have a global variable that contains it but I forgot to copy it — js- m
– js- m, Commented Dec 29, 2016 at 12:55
@VadimB Also with id='myDiv' corresponding HTMLElement gets exposed as global variable. — dfsq
– dfsq, Commented Dec 29, 2016 at 12:55

dfsq · Accepted Answer · 2016-12-29 12:52:20Z

5

If ck is defined inside of Mouse it's not available in rel. Move it outside:

function cK() {
    alert('You\'ve clicked on myDiv!');
}
function Mouse() {
    myDiv.addEventListener('click', cK);
}
function rel() {
    myDiv.removeEventListener('click', cK);
}

answered Dec 29, 2016 at 12:52

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DhruvJoshi Over a year ago

Please also see VadimB's comment on question

user4447799 Over a year ago

Can the remove function, called before adding the event listener, cause issues?

Collectives™ on Stack Overflow

Remove event listener that was created inside of a function? (JavaScript)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related