a標籤阻止預設跳轉行為事件
阿新 • • 發佈:2020-07-13
a標籤有預設的點選事件,點選事件的預設行為是跳轉到href指定的某一個網址
組織預設跳轉事件行為
1.javascript:void(0) 空處理 void為關鍵字
<!-- void 它只進行計算或者執行,但是沒有返回值 --> <a href="javascript:void(0)">點選跳轉</a> <!--當點選跳轉的時候,就會告訴a標籤,當前的解析是用js來解析的--> <br><br> <a href="Javascript:void(alert('不跳轉'))">警告警告</a> <!--不跳轉 但是會彈出一個提示框-->
2.javascript:;
<a href="javascript:;"></a> <!-- 既不跳轉,也沒提示 -->
3.使用手動的方式給a標籤一個點選事件來阻止跳轉,然後再點選事件中新增return false這個屬性
<a href="return false" onclick="return false">點選跳轉</a>
4.e.preventdefaule() 相當於button中要提交的submit,不讓它提交給這個屬性就可以阻止它的提交
<a href="http://wwww.baidu.com" id="test">跳轉</a> var test = document.getElementById("test"); function Default(e){ // 注意這裡的迴圈語句是沒有大括號的,因為他不會報錯,而且有了大括號是無法阻止跳轉的 if (e && e.preventDefault) e.preventDefault(); else window.event.returnValue = false; } test.onclick = function(e){ Default(e) }
注意點:如果href屬性是錨點,它是不管在哪裡只要點選了跳轉就會跳轉到選單欄或者頂部