我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

解决IE下javascript:void(0)会触发window.onbeforeunload事件

先看看问题现象

 

<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标签,使用上述方法可以很好的解决这个问题

posted on 2010-04-27 10:01 衡锋 阅读(6357) 评论(2)  编辑  收藏 所属分类: javascriptJqueryWeb开发

评论

# re: 解决IE下javascript:void(0)会触发window.onbeforeunload事件[未登录] 2010-08-10 03:51 王涛

javascript:  回复  更多评论   

# re: 解决IE下javascript:void(0)会触发window.onbeforeunload事件 2011-09-20 08:37 tb

会 遇到过这问题的  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: