Question

我正在尝试确定如何暂时禁用其他元素的点击事件（或传播？）。因此，当您在特定元素上的某个事件上单击mousedown时，将不再触发另一个元素click事件。

Simplified Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="World">World</div>
<div id="Hello">Hello</div>

    <script>
    $(document).mousedown(function (e){
        if( $('.there').length ){
            $('.there').remove();
            console.log('removed there');
            //here is where I would need the '#World' click event to not fire
        }
    });

    $(document).on('click','#World',function(){
        console.log('World');
    });
    $(document).on('click','#Hello',function(){
        console.log('Hello');
        $(this).append('<div class="there">there</div>');
        console.log('added there');
    });
    </script>

Answer 1

事件由元素触发...或者您指定的元素集合 他们所有的孩子。

Events happen is this order：

鼠标按下
鼠标松开
点击

«当您点击特定元素上的事件上的mousedown时»
真的需要另一种方式来解释它......

但我想我回答了。

CodePen：

$(document).on("mousedown",function(){
    console.log("mousedown");
});

$(document).on("click",function(){
    console.log("click");
});

$(document).on("mouseup",function(){
    console.log("mouseup");
});

//----

$(document).find("#main").on("mousedown click mouseup",function(e){
    e.stopPropagation();
    console.log("NOTHING....");
});

$(document).find("#okay input").on("mousedown click mouseup",function(e){
    e.stopPropagation();
    console.log("Just the OKAY");
});

只需点击无处不在。

细心的眼睛会看到如何禁用继承它是如何“起泡”的。

Answer 2

我已经看到开发人员暂时从第二个元素中删除事件，然后在必要时添加它们，但我发现暂时禁用特定事件的最佳方法是将代码添加到事件的处理程序中，以检查某种类型状态变量或类。我觉得我措辞不好所以这是一个简单的例子：

var buttonsToDisable = $('.mybuttons'),
    disablerButton = $('#disabler');

buttonsToDisable.on('click',function(e) {
    var ele = $(this);
    if(!ele.is('.disable-click')) {
        // some event handler logic here
    };
});

// Toggle click-events on all buttons with the .mybuttons class when clicked
disablerButton.on('click',function(e) {
    if(!buttonsToDisable.is('.disable-click')) {
        buttonsToDisable.addClass('disable-click');
    } else {
        buttonsToDisable.removeClass('disable-click');
    };
});

如果您还想停止mybuttons事件的传播，只需在else语句中添加if即可调用事件的stopPropagation()功能。

Answer 3

由于#World是父母的孩子，如果你先点击#World，它的点击事件将被触发，然后是父（div，body等），然后是html。

如果你停止在＃World上传播，那么即使是一次，也不会触发父母事件的点击事件。

我认为你需要检查点击#World时是否有可用的长度。即。

$(document).on('click','#World',function(){
    if ( $('.there').length ) {
        return; // or return false;
    }

    else {
        //code you want to execute
        console.log('World');
    }
});

停止传播不同的元素

3 个答案: