I have some simple code, but currently it does not remove the listener after the first call. How can I achieve this? Or do I really need to add redundant if/else checks on a var set upon notice?

    document.addEventListener("contextmenu", function(e){
        alert("Please remember this is someone's art! Give credit where it is deserved!");
        document.removeEventListener("contextmenu", function(e){
            console.log('User has been warned...');
        });
    }, false);

Updated code Still same message every right click

    document.addEventListener("contextmenu", function msg(e){
        alert("Please remember this is someone's art! Give credit where it is deserved!");
        e.removeEventListener("contextmenu", msg, false);
    }, false);

I have some simple code, but currently it does not remove the listener after the first call. How can I achieve this? Or do I really need to add redundant if/else checks on a var set upon notice?

    document.addEventListener("contextmenu", function(e){
        alert("Please remember this is someone's art! Give credit where it is deserved!");
        document.removeEventListener("contextmenu", function(e){
            console.log('User has been warned...');
        });
    }, false);

Updated code Still same message every right click

    document.addEventListener("contextmenu", function msg(e){
        alert("Please remember this is someone's art! Give credit where it is deserved!");
        e.removeEventListener("contextmenu", msg, false);
    }, false);

• javascript

• 1 it needs to be document.removeEventListener, not e.removeEventListener – jasonscript Commented Nov 20, 2014 at 5:55

3 Answers 3

you need to pass the same function to remove as add.

the easy way to do that is to give the function a name and pass the name to removeEventListener():

 document.addEventListener("contextmenu", function me(e){
        alert("Please remember this is someone's art! Give credit where it is deserved!");
        document.removeEventListener("contextmenu", me, false);
    }, false);

see https://developer.mozilla/en-US/docs/Web/API/EventTarget.removeEventListener for a good overview

obligatory fiddle: http://jsfiddle/w1kzLkoL/

tested in chrome, firefox, and IE10

You may try this example:

document.addEventListener("contextmenu", (function() {
  var done = false;
  return function(e) {
    if (!done) {
      done = true;
      alert('Warning !');
    }
    console.log('done ...', done);
    e.preventDefault();
    return false;
  };
})(), false);

Open console... right click

Easiest way is to just configure the event listener with { once: true }.

document.addEventListener('contextmenu', (e) => {
  your code...
}, { once: true });