Question

我有两种方法

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

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

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

        //do B
    });

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

Answer 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
    }
});

Answer 2

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

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

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

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

        //do B
    });

Answer 3

为什么不完全放？

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

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

Answer 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
});

Answer 5

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

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

根据spec，

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

然后，一种可能性就是只在一个函数内加入所有处理程序。

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

<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);

停止按钮点击？

5 个答案: