BlogJava-Hafeyang's Tech Space-随笔分类-Jqueryhttp://www.blogjava.net/Hafeyang/category/37213.html长于前端开发。乐意分享。zh-cnFri, 06 May 2011 14:21:40 GMTFri, 06 May 2011 14:21:40 GMT60jQuery中的stopImmediatePropagation与stopPropagation的区别http://www.blogjava.net/Hafeyang/archive/2011/05/06/stoppropagataion_vs_stopimmediatepropagation.html阳衡锋阳衡锋Fri, 06 May 2011 10:04:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/05/06/stoppropagataion_vs_stopimmediatepropagation.htmlhttp://www.blogjava.net/Hafeyang/comments/349697.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/05/06/stoppropagataion_vs_stopimmediatepropagation.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/349697.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/349697.html 
<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
 


阳衡锋 2011-05-06 18:04 发表评论
]]>datagrid性能（一）：性能问题何来？http://www.blogjava.net/Hafeyang/archive/2011/01/18/the_performance_challenge_of_datagrid_you_may_face.html阳衡锋阳衡锋Tue, 18 Jan 2011 02:25:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/18/the_performance_challenge_of_datagrid_you_may_face.htmlhttp://www.blogjava.net/Hafeyang/comments/343131.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/18/the_performance_challenge_of_datagrid_you_may_face.html#Feedback4http://www.blogjava.net/Hafeyang/comments/commentRss/343131.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/343131.html阅读全文

阳衡锋 2011-01-18 10:25 发表评论
]]>从jQuery的缓存到事件监听http://www.blogjava.net/Hafeyang/archive/2011/01/04/jquery_cache_and_events_bind.html阳衡锋阳衡锋Tue, 04 Jan 2011 07:20:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/04/jquery_cache_and_events_bind.htmlhttp://www.blogjava.net/Hafeyang/comments/342286.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/04/jquery_cache_and_events_bind.html#Feedback4http://www.blogjava.net/Hafeyang/comments/commentRss/342286.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/342286.html阅读全文

阳衡锋 2011-01-04 15:20 发表评论
]]>解决IE下javascript:void(0)会触发window.onbeforeunload事件http://www.blogjava.net/Hafeyang/archive/2010/04/27/fix_anchor_of_href_javascript_void_trigger_window_onbeforeunload_event_at_IE.html阳衡锋阳衡锋Tue, 27 Apr 2010 02:01:00 GMThttp://www.blogjava.net/Hafeyang/archive/2010/04/27/fix_anchor_of_href_javascript_void_trigger_window_onbeforeunload_event_at_IE.htmlhttp://www.blogjava.net/Hafeyang/comments/319445.htmlhttp://www.blogjava.net/Hafeyang/archive/2010/04/27/fix_anchor_of_href_javascript_void_trigger_window_onbeforeunload_event_at_IE.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/319445.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/319445.html先看看问题现象

 

<script type="text/javascript">
window.onbeforeunload=function()
{
    alert("onbeforeunload event");
    //return false;
}
</script>
<a href="#" onclick="return true;">测试1</a><br/>
<a href="javascript:void(0)" onclick="return true;">测试2</a><br/>
<a href="javascript:void(0)" onclick="return false;">测试3</a><br/>
<a href="javascript:void(alert('test 4.'))" onclick="return true;">测试4</a><br/>
<a href="javascript:void(alert('test 5.'))" onclick="return false;">测试5</a><br/>

 

IE下,"测试4"，"测试5"会触发window.onbeforeunload事件。这是因为，点击事件触发的时候（调用顺序：onclick->window.onbeforeunload->href）。

实际使用的时候还是尽量避免使用javascript:void(0)这样的写法,可以使用 <a href="###"></a>可以防止锚点，但是如果已经写了。可以用jQuery的live方法解决：

jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 

还不支持 blur, focus, mouseenter, mouseleave, change, submit 

与bind()不同的是，live()一次只能绑定一个事件。


这个方法跟传统的bind很像，区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说，如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时，对于这个新增加的li，其click事件依然可用。而无需重新给这种新增加的元素绑定事件。


.live()与流行的liveQuery插件很像，但有以下几个主要区别：

 

  • .live 目前只支持所有事件的子集，支持列表参考上面的说明。
  • .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
  • .live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。

 

要移除用live绑定的事件，请用die方法。

具体的解决代码为：

 

//IE javascript:void(0)会触发window.onbeforeunload事件
        if(document.all){
            $("a[href='javascript:void(0)']").live("click",function (e){
                e.preventDefault();
            });
        }

 

 

使用live方法对于新增的<a href="javascript:void(0)"></a>仍有效，使用例如jQuery datepick会动态的生成很多这样a标签，使用上述方法可以很好的解决这个问题



阳衡锋 2010-04-27 10:01 发表评论
]]>