How to stop DOM javascript event handler

Question

I have the following code with intention of stoping the handling of mouse clicks on webpage, after the very first mouse click.

    // The following is inside the onload function of html BODY.
    var     theLeftSide     = document.getElementById("leftSide");
    var     theBody         = document.getElementsByTagName("body")[0];

    theBody.addEventListener("click",  function() {
        gameOver( theLeftSide, theBody );
    });

    ....................
    function gameOver(theLeftSide, theBody){  
        alert("That is not the correct face. Game over.");
        theBody.onclick = null;
        theLeftSide.lastChild.onclick = null;
    }

But, the mouse handling does not stop (as indicated by the alerts). I did some search, to confirm that javascript passes "object parameters" by reference. When i step through the debugger, i see the event handler (theBody.onclick) is getting set to NULL. Why is this change in gameOver() not affecting the webpage body ?

UPDATE: Thanks to all the comments. Even though i realized my mistake when i took a break after my original post, all replies were helpful to me to learn things that i did not know before, especially since they induced me to read docs further. I had to modify the accepted answer, because the variables were local to a function and not global. So, current code which has solved my trouble looks like this ::

    theBody.addEventListener("click",  function clickListener() {
        gameOver( theLeftSide, theBody, clickListener );
    });

    And outside the function where the above statement is, i have

    function gameOver(theLeftSide_param, theBody_param, clickListener_param) {
        alert("That is not the correct face. Game over.");
        theBody_param.removeEventListener("click", clickListener_param);
        theLeftSide_param.lastChild.onclick = null;
    }

clickListener had to be passed as a parameter, because that was not a global and was not visible outside to gameOver().

Use removeEventListener

Barmar
– Barmar

2015-10-16 22:52:53 +00:00
Commented Oct 16, 2015 at 22:52 — Barmar
– Barmar, Commented Oct 16, 2015 at 22:52

jfriend00 · Accepted Answer · 2015-10-16 22:54:17Z

1

Setting the onclick property does not affect event handlers added with .addEventListener() in any way. If you want to remove those event handlers, then you can use .removeEventListener() on them.

Note: a common technique for temporarily blocking all click events is to insert a transparent div above all your content and it will grab all the click events and then use a click handler on that transparent div that stops propragation. This is a technique that can be used when there are many different even handlers, perhaps some of which you don't even control directly or when you want to block them only temporarily and then restore them later.

answered Oct 16, 2015 at 22:54

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

2 Comments

nsamuel Over a year ago

Patrik has given code in his answer, for this technique. So, I guess all mouse events will be delivered only to this <div> since it covers the entire visible webpage. There would be no need to use stopPropagation() or event handlers in this case - is this correct ?

jfriend00 Over a year ago

If you don't use .stopPropagation(), then events will propagate up to the body, document and window objects. If there are event handlers there, they will get click events on the div, so .stopPropagation() would be recommended. If there are no click event handlers on those higher level objects, then it would not matter.

Barmar · Accepted Answer · 2015-10-16 22:57:42Z

0

Event handlers assigned using addEventListener are not in the onclick property (since that can only hold one function, and you can add an arbitrary number of listeners). Use removeEventListener to remove a handler added with addEventListener.

Since you need to provide the listener function to this, and it has to match the function that was added, you should move that function out to a named function, since two anonymous functions will never be equal.

function clickListener() {
    gameOver(theLeftSide, theBody);
}
theBody.addEventListener("click", clickListener);

function gameOver(theLeftSide, theBody) {
    alert("That is not the correct face. Game over.");
    theBody.removeEventListener("click", clickListener);
    theLeftSide.lastChild.onclick = null;
}

answered Oct 16, 2015 at 22:57

Barmar

789k57 gold badges554 silver badges669 bronze badges

1 Comment

nsamuel Over a year ago

Accepted the first comment as answer.

Patrik Fröhler · Accepted Answer · 2015-10-16 23:05:42Z

0

If you want to stop mouse clicks after the first click then you can place a div overlay after the first mouseclick, tough not 100% sure if this is the answer you is looking for.

DEMO:

HTML:

<div id="dis_click"></div>
<button type="button" onclick="alert ('You clicked me')">Click me first!</button>
<button type="button" onclick="alert ('you didnt follow the instructions!')">then after click me!</button>

CSS:

.overlay {
    position: absolute;
    width:100%;
    height:100%;
    background-color: rgba(1, 1, 1, 0);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

JavaScript:

document.onmouseup = myMouseUpHandler;

function myMouseUpHandler(){  
    document.getElementById("dis_click").className = "overlay";
}

edited Oct 16, 2015 at 23:05

answered Oct 16, 2015 at 22:59

Patrik Fröhler

1,3011 gold badge12 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to stop DOM javascript event handler

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related