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阻止表单提交默认行为的两种方式 js阻止表单提交默认行为的两种方式 a标签阻止默认跳转行为事件 js事件冒泡、阻止事件冒泡以及阻止默认行为阻止跳转的四种方式，你知道吗？ vue.js 自带阻止默认事件阻止冒泡关于jQuery与JS的阻止冒泡与阻止默认事件处理 jquery阻止事件冒泡的3种方式 JavaScript阻止默认跳转 js 停止事件冒泡和阻止浏览器默认事件