停止按钮点击？答案

【问题标题】：Stop button clicks?停止按钮点击？
【发布时间】：2014-04-09 10:19:04
【问题描述】：

我有两种方法

$('.btn-delete').click(function(){

        //do A
        //return false?
    });

$('.btn-delete').click(function(){

        //do B
    });

当 A 返回 false 时，如何阻止“B”发生？

【问题讨论】：

只要你按照确切的顺序绑定它们，你可以在return false之前使用e.stopImmediatePropagation()，只要你包含参数e（作为事件）。参考：api.jquery.com/event.stopimmediatepropagation
这个答案提供了一个更好的解决方案 - stackoverflow.com/a/1491784/903056
你有两个处理程序的任何原因？而且不能合并？

标签： javascript jquery

【解决方案1】：

var whatDoesAReturn = false;
$('.btn-delete').click(function(){
    if (something) {
        whatDoesAReturn = true;
        return true;
    } else {
        whatDoesAReturn = false;
        return false;
    }
});

$('.btn-delete').click(function(){
    if (!whatDoesAReturn) {
        // Do whatever
    }
});

【讨论】：

【解决方案2】：

使用 jquery 事件的stopImmediatePropagation。这正是它的用途：

$('.btn-delete').click(function(e){

        //do A
        if (a is returning false) 
          e.stopImmediatePropagation();
    });

$('.btn-delete').click(function(){

        //do B
    });

【讨论】：

我个人不喜欢这种方法。 6 个月后你回来时有点难以理解发生了什么......
@LuckySoni 然后发表评论说“不允许其他处理程序执行”。你不能查一下stopImmediatePropagation() 做了什么吗？这将是不言自明的
@Ian 是的，没错，但这仍然有些限制。如果我打算稍后添加更多处理程序怎么办..我应该回去再次更改代码吗？需要时间来弄清楚为什么我的其他处理程序不起作用。如果它是一个小项目，那么这可能会很好，否则我认为它不是一个好的解决方案。

【解决方案3】：

为什么不完全放？

$('.btn-delete').click(function(){

    //do A
    // if true do B
});

【讨论】：

【解决方案4】：

如果这不是您可以在第一个事件中设置标志的解决方案，您最好创建一个函数并设置条件来处理。

使用单个事件处理程序

$('.btn-delete').click(function(){

    //do A
    if(condition != false)
        execute code of second event.
    //return false?

});

使用标志

flag = true;
$('.btn-delete').click(function(){    
        //do A
        if (something) {
           flag = true;
        else
           flag = false;
    return flag;  
 });

$('.btn-delete').click(function(){
        if(!flag) return;
        //do B
});

【讨论】：

在第二种情况下，不要忘记在第二个函数中再次将标志设置为 true，以便为下一次迭代准备页面。按钮可以点击多次！

【解决方案5】：

_{（以防万一有人想要非 jQuery 解决方案）。}

这不能直接在纯 JavaScript 中完成，因为您无法确定事件侦听器将按什么顺序触发。

根据spec，

虽然 EventTarget 上的所有 EventListener 都保证是由该 EventTarget 接收到的任何事件触发，否规范是关于他们将收到的顺序事件 与 EventTarget 上的其他 EventListener 相关。

然后，一种可能性是将所有处理程序加入到一个函数中。

但如果这不可能，您可以使用事件委托给包装器，并在必要时停止传播：

<div class="btn-wrapper"><button class="btn-delete">Delete</button></div>

var btn = document.querySelector('.btn-delete');
btn.addEventListener('click', function(e){
    // do A
    if(cond) e.stopPropagation();
}, false);
btn.parentNode.addEventListener('click', function(e){  
    //do B
}, false);

【讨论】：