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通过＆＃34;对象参数＆＃34;引用。当我单步执行调试器时，我看到事件处理程序（theBody.onclick）被设置为NULL。为什么gameOver（）中的这种变化不会影响网页正文？

更新：感谢所有评论。虽然我在原帖后休息时意识到自己的错误，但所有回复都对我学习以前不知道的事情有所帮助，特别是因为他们诱使我进一步阅读文档。我不得不修改接受的答案，因为变量是功能本地而非全局功能。所以，解决了我的麻烦的当前代码看起来像这样::

    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，它将获取所有点击事件，然后在该透明div上使用单击处理程序来停止propragation。这种技术可以在有许多不同的处理程序时使用，也许其中一些甚至不能直接控制，或者只想暂时阻止它们，然后再恢复它们。

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事件处理程序

3 个答案: