在做頁面時，如果想做一個鏈接點擊后不做任何事情，或者回應點擊而完成其他事情，可以設定其屬性 href = "https://www.cnblogs.com/libo-web/p/#"，但是，這樣會有一個問題，就是當頁面有滾動條時，點擊后會回傳到頁面頂端，用戶體驗不好，
（1）阻止默認事件
阻止默認事件的發生有兩個方法：
- return false
- e.preventDefault()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com/">去百度</a><br>
<!-- 阻止默認事件兩種方法 -->
<a href="https://www.baidu.com/" onclick="return false">去百度(禁止默認事件:return false)</a><br>
<a href="https://www.baidu.com/" id="go">去百度(禁止默認事件:e.preventDefault())</a>
<script>
//獲取元素節點
let go = document.querySelector("#go")
// 點擊事件
go.onclick = function (e) {
// 阻止默認事件
e.preventDefault()
}
</script>
</body>
</html>
通過阻止a標簽默認事件就可以禁止a標簽跳轉！
（2）javascript:void(0)（少用）
javascript:void(0)這是一種偽協議，void(0)在IE中可能會引起一些問題，比如：造成gif影片停止播放等
void是javascipt自身的運算子，它表示的是只執行運算式，但沒有回傳值！
<a href="javascript:void(0)">點擊無法跳轉(javascript:void(0))</a>
<a href="javascript:void(null)">點擊無法跳轉(javascript:void(null))</a>
這兩種寫法都可以，都表示一個死鏈接，點擊無效果
（3）javascript:;
javascript:; 執行一段空白的javascript陳述句，回傳慷訓者false值，從而防止鏈接跳轉
javascript:; 寫法比 javascript:void(0) 好，后者存在瀏覽器兼容bug
<a href="javascript:;">點擊無法跳轉(javascript:;)</a>
（4）href(####)
使用2個到4個#，見的大多是"####"，也有使用"#all"等其他的，一個無意義的標簽指定，不做任何處理，
（這種方法會在瀏覽器地址欄上出現“####”）
<a href="####">點擊無法跳轉</a>
注意：只是用一個“#”是不行的，會默認重繪頁面回到頁面頂部
總結：
-
<a href="https://www.cnblogs.com/libo-web/p/####"></a>
-
<a href="javascript:void(0)"></a>
-
<a href="javascript:void(null)"></a>
-
<a href="https://www.cnblogs.com/libo-web/p/#" onclick="return false"></a>
-
<a href="https://www.cnblogs.com/libo-web/p/#" id="go"></a>
<script>
let go = document.querySelector("#go")
go.onclick = function (e) {
e.preventDefault()
}
</script>
本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15798017.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/413068.html
標籤：Html/Css
上一篇：記錄：瀏覽器渲染程序