为什么我可以关闭 mousedown 事件，但不能关闭其链接的 mouseup 事件？答案

【问题标题】：Why can I off a mousedown event, but not its chained mouseup event?为什么我可以关闭 mousedown 事件，但不能关闭其链接的 mouseup 事件？
【发布时间】：2017-01-19 00:59:45
【问题描述】：

我有两个链接的鼠标事件：

$('body > form').on("mousedown", function(e){ 
    //Do stuff 
}).on("mouseup", function(){
    /*More stuff, including
       window.addEventListener(...
    */  
});

但是，当我尝试从另一个外部函数off() 时，我只能off() mousedown，但不能mouseup，其功能仍然有效。

嵌套的addEventListener 会阻止我取消它的事件吗？ (

顺便说一句，我怎么做都没关系链：（$().off().off();），或解链（$().off(); $().off();），或组合（$().off(A B);）或反转（A B B A）元素；始终如一地，off(mousedown) 有效，但从来没有off(up)。

这是我的完整 JS 代码：

（有问题的部分是第二个脚本，在最后：）

<script>
function comment() {

    $('body > form').on("mousedown.markerPlacer", function(e){   
     //Place the cursor marker on the screen 

        var newComment2 = $('<div id="newComm" class="marker" class="deg45" &uarr;</div>');
        $('form').append(newComment2);  

    }).on("mouseup", function(){   
    //Now use the Q-key to rotate the marker.

       window.addEventListener("keydown", extraKey, false); 
       window.addEventListener("keyup", keysReleased2, false); 

            function extraKey(e) {
                var deg = e.keyCode;  
                    if (deg == 81)  { //81 is the keycode, which codes for Q
                        $('#newComm').attr('class', 'marker').addClass('deg0'); 
                    } else {
                        return false;
                    };  
                    e.preventDefault(); 
            };                 
            function keysReleased2(e) {
                e.keyCode = false;
            };
    });  
};
</script>

<script>
function dismissComment() {
        $('body > form').off("mousedown mouseup");    
}
</script>

【问题讨论】：

因为 .on 不返回任何内容。
提供minimal reproducible example。如果没有适当的代码上下文，我们无法看到您如何尝试使用 off()
@Bindrid，这是什么意思，为什么会有所不同，因为它们都是 .on 事件？
@charlietfl，当然，但是 M-C-V 的答案需要我几分钟才能完成。
我猜你希望off() 会删除你在on() 中创建的任何监听器......但事实并非如此。一旦你添加了一个监听器，它就会一直存在，直到它被移除

标签： jquery chaining mousedown event-listener mouseup

【解决方案1】：

出于好奇，我编写了一个类似的链式 mousedown 和 mouseup，如您的代码所示。
我在按钮单击时取消绑定它们。它似乎工作正常，我无法重现您的问题。
它能够“关闭” mousedown 和 mouseup 事件监听器。

$("#testMe")
  .on("mousedown", function(e) {
    appendText(getButton(e.button) + " | " + $(this).attr("id") + " | " + "mouseDOWN | " + new Date());
  })
  .on("mouseup", function(e) {
    appendText(getButton(e.button) + " | " + $(this).attr("id") + " | " + "mouseUP | " + new Date());

    $(document).off("keydown keyup");
    $(document).on("keydown", keydown_pressed);
    $(document).on("keyup", keyup_pressed);
  });

解除绑定/“关闭”代码

$("#unbind").click(function(e) {
  $("#testMe").off("mousedown mouseup");
  $(document).off("keydown keyup");
});

在页面加载时，mousedown 和 mouseup 会附加到输入文本框。

鼠标点击文本框后，添加窗口keydown和keyup事件监听器。

在我“关闭”或解除绑定后，所有事件监听器都被移除。

jsfiddle link

【讨论】：