js常用阻止默認事件跳轉的2種方式

本文轉載自查看原文 2021-07-01 12:03 147 javascript

html元素常見默認行為

1. a標簽自動跳轉

2. button表單type設置為submit會自動提交

注：button的type屬性設置為button可阻止表單自動刷新並跳轉頁面

阻止默認跳轉的2種方式

e.preventDefault()

return false

注：e.preventDefault()不會阻止后面的代碼運行，return false會終止后續代碼執行

DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <a href="http://www.baidu.com" id="a">百度</a>
   <form action="http:www.baidu.com">
       <button type="submit" value="提交" id="submit">提交</button>
   </form>

   <script>
       var a = document.getElementById("a"),
           submit = document.getElementById("submit");

        //e.preventDefault()不會阻止后面的代碼運行
        a.onclick = function(e) {
           e.preventDefault();
           alert("阻止跳轉");
        }

         submit.onclick = function (e) {
            e.preventDefault();
            alert("阻止跳轉");
        }


        //return false會阻止后面的代碼運行
        a.onclick = function (e) {
            return false;
            alert("阻止跳轉");
        }

         submit.onclick = function (e) {
            return false;
            alert("阻止跳轉");
         }

   </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js阻止默認事件,如a標簽跳轉和事件冒泡阻止a標簽默認跳轉事件 JS如何阻止事件冒泡和阻止默認事件 js html阻止頁面跳轉的四種方式 js 停止事件冒泡阻止瀏覽器的默認行為（阻止a標簽跳轉） js阻止表單提交默認行為的兩種方式 js阻止表單提交默認行為的兩種方式 a標簽阻止默認跳轉行為事件 js事件冒泡、阻止事件冒泡以及阻止默認行為 js dom 阻止事件冒泡，阻止事件的默認行為