Question

我有一个父元素，其中附加了mouse up和mouse down个事件，以及附加了click个事件的子元素。

在父级触发click事件后，有没有办法阻止儿童发生mouseup事件？

例如，JSfiddle here上的目标是，如果点击它，内部方块不会变为绿色。

理想情况下，我想在不修改$('#inner').on('click', function(){})的情况下这样做。我已经知道我可以在mouseup上设置一个布尔值并在click上检查它，但我正在尝试找到一种方法来执行它而不修改click事件。

使用jquery（或任何其他库）是选项，除了不修改click方法之外，我没有任何其他限制。

修改

感谢@adeneo的建议，看起来很有希望，但它让我意识到我错过了很大一部分问题。在mouseup内，将进行条件检查，以确定是否应该阻止点击。如果我删除了该事件，我可以在避免点击后以某种方式将其添加回来吗？以setTimeout为例。我不确定如何（或者是否可能）获取对已移除的click函数的引用，然后重新添加处理程序。

希望这new fiddle here帮我解释一下好一点！

Answer 1

$('#inner').on('mouseup', function(e) {    
        $(this).unbind("click");
        $(this).css({'background': 'black'});    
});

你有没有试过这个？

Answer 2

尝试e.stopImmediatePropagation（）;在你的内部代码中。

Answer 3

只需使用以下代码替换您的代码并检查即可。要停止内部div的click事件，可以使用preventDefault（）或stopPropagation（）。请查看以下

 $('#inner').on('click', function(e) {      
     $(this).stopPropagation();
    // or
    // $(this).preventDefault();
    alert('inner click');
});

$('#outer').on('mousedown', function(e) {
    $(this).css({'background': 'green'});
});

$('#outer').on('mouseup', function(e) {
    $(this).css({'background': 'yellow'});


});

Answer 4

我很确定这是您正在寻找的答案：

$($(this)).children().click(function (event) { // Preveu la propagació del click als fills 
                // event.stopPropagation();
            });

在父母上鼠标后阻止孩子的onclick？

4 个答案: