a标签href属性值对onbeforeunload事件的影响

背景

在某些场景下,我们希望点击a标签以后不做跳转,并且能响应a标签绑定的事件,常见方法href设置javascript:;、#### 等,但经测试发现,这几种方式在chrome,ie9上对onbeforeunload事件的触发不一致,这里做个测试和总结。

示例代码

示例代码里对几种不同的方式在chrome,ie下作了测试。
-- chrome版本:版本 58.0.3029.110
-- ie版本:9.0.8112



    
        
        
    

    
        
    
    

结论

a标签href属性值对onbeforeunload事件的影响_第1张图片
比较.png

1.使用href="" 与使用href="#" 效果是一样的,都会滚动到页面顶部
2.a标签不加href属性,不会具有a标签的性质(hover手形,下划线),但可以用css加上标签的默认样式
3.对onbeforeunload的触发情况:

  • chrome下,href="" 、href="tel"、href="mailto" 都会触发onbeforeunload事件
  • ie下:javascript:void(0); javascript:; href="" 都会触发onbeforeunload事件
    so,

4.在希望点击a标签以后不做跳转,并且能响应a标签绑定的事件,而页面绑定了onbeforeunload事件,href="####", 以及不设置href属性这两种方式是安全的。(href="#"会有页面滚动到顶部的效应)
5.但是,如果使用了javascript:;的方式,可以在a标签的响应事件里加上,return false; 或者e.preventDefault() 来解决ie9下频繁弹出页面离开提示的问题

Reference

1.onebeforeunload is too enthusiastice in ie9 https://stackoverflow.com/questions/7263309/onbeforeunload-event-is-too-enthusiastic-in-ie9

你可能感兴趣的:(a标签href属性值对onbeforeunload事件的影响)