如何在jQuery中阻止来自第一个处理程序的其他事件处理程序

Question

如果将两个或多个事件处理程序附加到HTML元素,它们将一个接一个地执行.但是,如果要根据第一个处理程序中检查的条件停止后续事件处理程序,那么您应该做什么？

例如:

<div id='target'>
</div>

<p id='result'>
</p>

如果第一个处理程序被取消,我想取消第二个处理程序.

$(function() {
    var target = $('#target'),
        result = $('#result');
    target.click(function(e) {
        result.append('first handler<br />');
        // Here I want to cancel all subsequent event handlers
    });
    target.click(function(e) {
        result.append('second handler<br />');
    });
});

你可以在这里看到小提琴.

PS:我知道这会e.preventDefault()阻止HTML元素的默认操作(例如,阻止因链接点击而发送HTTP GET请求),并e.preventPropagation()导致事件传播到DOM树中的父元素.我也知道可以使用中间变量,在第一个处理程序中将其设置为true,并在后续处理程序中检查它.但是我想看看是否有一个更整洁,更复杂的解决方案来解决这个问题.

Answer 1

请参阅event.stopImmediatePropagation()- http://api.jquery.com/event.stopImmediatePropagation/

根据jQuery API文档,这个方法:

保持其余的处理程序不被执行,并防止事件冒泡DOM树.