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

最新推荐文章于 2023-08-31 18:44:00 发布

weixin_33862041

最新推荐文章于 2023-08-31 18:44:00 发布

阅读量346

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000009823745

本文通过实验对比了不同A标签href属性设置对onbeforeunload事件的影响，总结了Chrome与IE9浏览器下触发该事件的一致性和差异性，推荐了最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

示例代码

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .container {
                margin-bottom: 64px;
            }
            .content {
                height: 2000px; /*设置一个比较高的高度，使页面出现滚动条*/
                background: #f0f0f0;
            }
            .item {
                margin-top: 12px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="content">
                测试a标签
            </div>
            <div>
                <div class="item"><a href="javascript:void(0);" >test1-使用void</a> </div>
                <div class="item"><a href="javascript:;" >test2-使用javascript:;</a> </div>
                <div class="item"><a href="####" >test3-使用####</a></div>
                <div class="item"><a href="#">test4-使用#</a></div>
                <div class="item"><a class="">test5-不加href属性</a></div>
                <div class="item"><a href="">test6-href属性值为空</a></div>
                   <div class="item"><a href="tel:18822222222">test7-打电话</a></div>
                <div class="item"><a href="mailto:xxx@163.com">test8-发邮件</a></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onbeforeunload = function(e) {
            e.returnValue = '';
        }
    </script>
</html>

结论

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