如果将两个或多个事件处理程序附加到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,并在随后的处理程序中检查它。但是我想看看是否有更简洁,更复杂的解决方案来解决这个问题。
参见event.stopImmediatePropagation()
- http://api.jquery.com/event.stopImmediatePropagation/
防止其他处理程序被执行,并防止事件冒泡到DOM树。
解决方案是针对浏览器的。参见dojo.stopEvent
:
dojo.stopEvent = function(/*Event*/ evt){
// summary:
// prevents propagation and clobbers the default action of the
// passed event
// evt: Event
// The event object. If omitted, window.event is used on IE.
if(has("dom-addeventlistener") || (evt && evt.preventDefault)){
evt.preventDefault();
evt.stopPropagation();
}else{
evt = evt || window.event;
evt.cancelBubble = true;
on._preventDefault.call(evt);
}
};
更新小提琴:http://jsfiddle.net/pFp7P/1/