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

背景

在某些场景下，我们希望点击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/questions/7263309/onbeforeunload-event-is-too-enthusiastic-in-ie9

最后编辑于：2017.12.08 02:08:19

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

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