Remove event listener on click JS

Question

Scenario :

I use this code for a page and apply it on click event,
now I have trouble to remove it from page (same way, on click).
How do I do that?

document.addEventListener('touchmove', function(e) {
  e.preventDefault();
}, {
  passive: false
});

you need to create a function and then you can set for both the same callback. Then it should work. document.removeEventListener("touchmove", yourfunction); — BlackNetworkBit, Sep 05 '18 at 15:31
Possible duplicate of [JavaScript: remove event listener](https://stackoverflow.com/questions/4402287/javascript-remove-event-listener) — lenilsondc, Sep 05 '18 at 15:35

dysfunc · Accepted Answer · 2018-09-05T16:03:35.667

1

Use a named callback function touchMove when binding/unbinding the event listener to addEventListener and removeEventListener methods.

The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process;

var touchMove = function(e){
  e.preventDefault();
};

document.addEventListener('touchmove', touchMove, { passive: false });

document.removeEventListener('touchmove', touchMove);

edited Sep 05 '18 at 16:03

answered Sep 05 '18 at 15:37

dysfunc

2,008
1
13
15

Does it became self executable on page load if add var? Does it affect `passive: false` or where should I put it in this example? @dysfunc – Sep 05 '18 at 15:44
it's simply a function expression and will not execute on page load. it will bind to the event but not execute until it's been invoked via the event. you don't actually need to pass the listener options in if you want to invoke `e.preventDefault()`. Setting `passive: true` will ignore `e.preventDefault()` calls. – dysfunc Sep 05 '18 at 15:55
I need this `passive: false` code, so where should I put it?, tried this with the rest of it (add and remove lines added to on click event) but this it not working for me, this is the code from my attempt: `var touchMove = function(e){ e.preventDefault(); }, { passive: false };` @dysfunc – Sep 05 '18 at 16:00

Harry Chilinguerian · Answer 2 · 2018-09-05T15:51:02.633

So initialize your button to add the event listener on click to the touchmove area, then remove the click function from the button and set it up so the next cick adds the remove event listener for removing the click and touch event. Basically toggle the event listener on the button and the div.

//Touchmove action
function preDef(e) {
  e.preventDefault();
}

//Add the touchmove action and toggle the button to remove the action
function addE(e) {
  e.target.removeEventListener('click', addE, {passive: false});
  e.target.addEventListener('click', removeE, {passive: false});
  document.addEventListener('touchmove', preDef, {passive: false});
}

//Remove the touchmove action and toggle the button to add the action
function removeE(e) {
  e.target.removeEventListener('click', removeE, {passive: false});
  e.target.addEventListener('click', addE, {passive: false});
  document.removeEventListener('touchmove', preDef, {passive: false});
}

//Initialize the add action
document.getElementById('somebutton').addEventListener('click', addE, {passive: false});

Remove event listener on click JS

2 Answers2