防止执行后续事件绑定

Preventing execution of subsequent event bindings

本文关键字：事件 绑定 执行      更新时间：2023-09-26

我在一个元素上有多个事件绑定，例如#myDiv:

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

我想做的是创建一个验证绑定，以便只有在验证成功时才执行进一步的绑定。像这样:

$("#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!");
});
一种明显的方法是创建一个名为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条件的情况下防止进一步执行?

尝试使用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;
    }
});

您正在寻找的方法是e.s 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文档可以在这里找到:http://api.jquery.com/event.stopImmediatePropagation/

相关文章：