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

PrototypeZ 发布于2019-08-20 17:21 / 478人阅读

摘要：会有页面滚动到顶部的效应但是，如果使用了的方式，可以在标签的响应事件里加上，或者来解决下频繁弹出页面离开提示的问题

背景

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

示例代码

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



    
        
        
    

    
        
            
                测试a标签
            
            
                test1-使用void 
                test2-使用javascript:; 
                test3-使用####
                test4-使用#
                test5-不加href属性
                test6-href属性值为空
                   test7-打电话
                test8-发邮件

结论

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/que...

云服务器 idc机房托管 a标签href跳转 href属性html html标签的属性 js往标签href放数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83526.html

JS基础篇--JS之onunload、onbeforeunload事件详解

摘要：事件事件在用户退出页面时发生。注意事件同样触发了页面载入事件事件。如图所示大体一句话描述和支持事件但是或者不支持该事件。浏览器兼容情况完美支持不支持文字提醒信息不支持如图所示使用遇到的凡是标签都会触发事件包括这种。简介 onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过 window.onunload来调用。区别在于onbeforeunload在o...

rollback 2019-08-21 17:26 评论0 收藏0
DOM 事件详解

摘要：与此同时，我们获得了回调函数的句柄，从而可以随时从元素上移除相应的事件监听。对象会被作为第一个参数传递给事件监听的回调函数。 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是...

tianhang 2019-08-19 14:24 评论0 收藏0
页面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

lx1036 2019-08-01 17:44 评论0 收藏0
页面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有脚本执行完毕后触发。如果用户即将离开页面或者关闭窗口时，事件将会被触发以进行额外的确认。状态表示事件即将被触发。总结页面事件的生命周期事件在树构建完毕后被触发，我们可以在这个阶段使用去访问元素。页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

luckyyulin 2019-08-21 16:55 评论0 收藏0