a標籤href屬性值對onbeforeunload事件的影響

時間 2019-11-06

標籤標籤 href 屬性 onbeforeunload 事件影響简体版

原文原文鏈接

背景

在某些場景下，咱們但願點擊a標籤之後不作跳轉，而且能響應a標籤綁定的事件，常見方法href設置javascript:;、#### 等，但經測試發現，這幾種方式在chrome，ie9上對onbeforeunload事件的觸發不一致，這裏作個測試和總結。javascript

示例代碼

示例代碼裏對幾種不一樣的方式在chrome,ie下做了測試。
-- chrome版本：版本 58.0.3029.110
-- ie版本：9.0.8112css

<!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>

結論

1.使用href="" 與使用href="#" 效果是同樣的，都會滾動到頁面頂部
2.a標籤不加href屬性，不會具備a標籤的性質（hover手形，下劃線），但能夠用css加上標籤的默認樣式
3.對onbeforeunload的觸發狀況：html

chrome下，href="" 、href="tel"、href="mailto" 都會觸發onbeforeunload事件java
ie下：javascript:void(0); javascript:; href="" 都會觸發onbeforeunload事件
so,chrome

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...spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。