有这么个需求。要在一个文本框上监听两个事件,例如:
<script type="text/javascript">
$(function(){
$("#t").keyup(function(e){
$("#s").html("keyup1");
//stopImmediatePropagation可以阻止在这之后绑定的事件
//比较注释和不注释这一行的区别
e.stopImmediatePropagation();
});
$("#t").keyup(function(e){
$("#s").html("keyup2");
});
});
</script>
<input type="text" id="t" name="" value="" />
<span class="" id="s"></span>
如果在第一个事件中需要阻止第二个事件的执行可以在第一个事件中使用event.stopImmediatePropagation方法。jQuery的event的对象是增强的event对象,
stopImmediatePropagation就是jQuery独有的一种阻止jQuery绑定事件机制。可以通过
isImmediatePropagationStopped()来判断是否阻止了jQuery立即冒泡。
stopImmediatePropagation的实现可以参见我之前的一篇文章,
从jQuery的缓存到事件监听
在这篇文章中提到jQuery将事件都缓存在一个数组中按照先后顺序执行。如果stopImmediatePropagation就停止执行数组中的监听函数。
stopPropagation是阻止默认事件监听函数。不是jQuery独有,阻止默认事件的冒泡,比如监听了DOM节点和该节点的父节点的事件,默认是事件执行将从里到外,这就是所谓的冒泡。在IE9-浏览器中可以使用event.cancelBubble=false来做到,标准浏览器使用event.stopPropagation方法。jQuery也把stopPropagation扩展方式到IE上这样有了一致的方法。
综上所述,其实stopImmediatePropagation与stopPropagation就不是一个东西,所以也不存在什么区别了。
参考资料
http://api.jquery.com/event.stopImmediatePropagation/
http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation
http://api.jquery.com/event.stopImmediatePropagation/
http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation