如何停止 DOM javascript 事件处理程序

Question

我有以下代码，目的是在第一次鼠标单击后停止处理网页上的鼠标单击。

    // 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;
    }

但是，鼠标操作不会停止（如警报所示）。我做了一些搜索，以确认 javascript 通过引用传递 "object parameters"。当我单步执行调试器时，我看到事件处理程序 (theBody.onclick) 被设置为 NULL。为什么 gameOver() 中的此更改不会影响网页正文？

更新：感谢所有评论。尽管我在最初 post 后休息时意识到自己的错误，但所有回复都有助于我学习以前不知道的东西，特别是因为它们引导我进一步阅读文档。我不得不修改接受的答案，因为变量是局部于函数而不是全局。因此，解决了我的问题的当前代码如下所示 ::

    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 必须作为参数传递，因为它不是全局的并且在 gameOver() 之外不可见。

Answer 1

设置 onclick 属性不会以任何方式影响用 .addEventListener() 添加的事件处理程序。如果你想删除那些事件处理程序，那么你可以对它们使用 .removeEventListener()。

注意：临时阻止所有点击事件的常用技术是在所有内容上方插入透明 div，它会抓取所有点击事件，然后在透明 [=17] 上使用点击处理程序=] 停止传播。当有许多不同的偶数处理程序时可以使用这种技术，也许其中一些您甚至不能直接控制，或者当您只想暂时阻止它们然后稍后恢复它们时。

Answer 2

使用 addEventListener 分配的事件处理程序不在 onclick 属性中（因为它只能容纳一个函数，并且您可以添加任意数量的侦听器）。使用 removeEventListener 删除使用 addEventListener 添加的处理程序。

由于您需要为此提供侦听器函数，并且它必须与添加的函数相匹配，您应该将该函数移出到命名函数中，因为两个匿名函数永远不会相等。

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;
}

Answer 3

如果您想在第一次点击后停止鼠标点击，那么您可以在第一次点击鼠标后放置一个 div 覆盖层，但不能 100% 确定这是否是您要寻找的答案。

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";
}

如何停止 DOM javascript 事件处理程序

How to stop DOM javascript event handler

javascript

dom

event-handling