Question

我在元素上有多个事件绑定，比如#myDiv：

$("#myDiv").click(function(e) {
    // Do something
});

$("#myDiv").click(function(e) {
    // Do something more
});

$("#myDiv").click(function(e) {
    // Do something more
});

我想要做的是创建一个验证绑定，这样只有在验证成功时才会执行进一步的绑定。 Something like this：

$("#myDiv").click(function(e) {
    var error = false;
    // ... Validate
    error = true;
    if(error) {
        // Stop further bindings. (So 'Success!' won't be appended.)
        e.stopPropagation(); // This won't work
        return false;
    }
});

/*
 * I cannot change this function, and this must execute only if error == false
 * in the previous binding. 
 */
$("#myDiv").click(function(e) {
    $(this).append(" Success!");
});

One obvious way to do this将创建一个名为error的全局变量，并在所有绑定中添加一个条件，以便在error == true时不执行：

var error = false;

// validate
$("#myDiv").click(function(e) {
    ...
    error = true;
});

$("#myDiv").click(function(e) {
    if(error) return false;
    // Do something
});

$("#myDiv").click(function(e) {
    if(error) return false;
    // Do something more
});

但是有没有办法阻止进一步执行而不在所有绑定中添加if条件？

Answer 1

尝试使用event.stopImmediatePropagation()

$("#myDiv").click(function(e) {
    var error = false;
    // ... Validate
    error = true;
    if(error) {
        // Stop further bindings. (So 'Success!' won't be appended.)
        e.stopImmediatePropagation(); 
        return false;
    }
});

Answer 2

您正在寻找的方法是e.stopImmediatePropagation（）; 这将阻止任何其他处理程序在此事件之后运行。

以下是一个示例：http://jsfiddle.net/astuanax/7S6qs/2/

$("#myDiv").click(function(e) {
    var error = false;
    // ... Validate
    error = true;
    if(error){
     e.stopImmediatePropagation();
    }
});

在该示例中，您可以将错误的值设置为false，这将触发第3个事件处理程序。如果设置为true，则不会发生任何操作，也不会触发任何处理程序。

可以在此处找到jquery docuemntation：http://api.jquery.com/event.stopImmediatePropagation/

防止执行后续事件绑定

2 个答案: