阻止a標籤預設事件的幾種簡單方法
阿新 • • 發佈:2018-12-29
第一種: <a href = " javascript: void ( 0 ); ">百度</a> 或者<a href = " javascript:; ">百度</a>
測試:(可行)
<a href="javascript:void(0);" onclick="myjs()">百度</a> <a href="javascript:;" onclick="myjs()">百度1</a> <script type="text/javascript"> function myjs(){ alert("a標籤預設事件被阻止,執行js函式"); } </script>
第二種:<a href = " # ">百度</a> (最常見的,但是點選後頁面會返回到頂部,不可用);所以又有了<a href = " ## ">百度</a>或者<a href = " #! ">百度</a>
測試:
<div id="test" style="width: 1000px; height: 1300px; background: rgb(56,132,63)"></div> <a href="#" onclick="myjs()">百度</a> <!--不可行(執行js函式後頁面會返回到頂部)--> <a href="##" onclick="myjs()">百度1</a> <!--測試未發現問題--> <a href="#!" onclick="myjs()">百度2</a> <!--測試未發現問題--> <script type="text/javascript"> function myjs(){ alert("a標籤預設事件被阻止,執行js函式"); } </script>
第三種: e.preventDefault();阻止預設事件(不支援IE),IE中用window.event.returnValue = false; 阻止預設事件
測試:(可相容IE)
<a id="test" href="http://www.baidu.com">百度</a> <script type="text/javascript"> //宣告並獲取element var test = document.getElementById("test"); //阻止預設事件函式 function stopDefault(e) { if (e && e.preventDefault) e.preventDefault(); else window.event.returnValue = false; //相容IE } //自定義函式 function myjs(){ alert("阻止預設事件,執行自定義函式"); } //element點選阻止預設事件並執行自定義函式 test.onclick = function(e){ stopDefault(e); myjs(); } </script>