JavaScript基础知识:preventDefault和stopPropagation
整理🖊 一下两个不太常用且重要的知识点!
-
preventDefault()事件方法
-
【定义】:如果事件是可取消的,则 preventDefault() 方法会取消该事件,这意味着属于该事件的默认操作将不会发生。
-
【应用场景】:
-
单击“提交”按钮,阻止其提交表单
-
Code
<form action="https://www.baidu.com/" method="post"> <input type="submit" value="登录"> </form> <script> console.log(document.forms[0]); document.forms[0].onsubmit = function(){ console.log(event); console.log(event.cancelable);//检测事件是否可以取消--> Boolean event.preventDefault();//阻止默认事件 //return false; // 也可以阻止默认事件 } </script>
-
-
单击链接,防止链接跟随 URL
-
Code
<a href="https://www.baidu.com/" id="a">点我跳转</a> <script> let a = document.getElementById('a'); a.onclick = function(){ console.log(event); console.log(event.cancelable);//检测事件是否可以取消 -->Boolean event.preventDefault();//阻止默认事件 //return false; // 也可以阻止默认事件 } </script>
-
-
-
【注】并非所有活动都可以取消。请使用 cancelable 属性 来确定事件是否可取消。
- 如上面两个示例中,其返回值为Boolean,可以取消–>true,否则为–>false
-
【注】preventDefault() 方法不会阻止事件通过 DOM 进一步传播。请使用 stopPropagation() 方法来解决 – ⏬下面讲解 。
-
-
stopPropagation()事件方法
-
【定义】stopPropagation() 方法防止调用相同事件的传播。
-
【传播阶段】传播意味着向上冒泡到父元素或向下捕获到子元素或元素目标本体 三个3️⃣ 阶段
- 【注】添加事件(HTML属性事件,JavaScript元素事件,addEventLisenter ,attachEvent(IE))默认都是冒泡,捕获需要**addEventLisenter()**显式的指定第三个参数为true(事件捕获)
-
Code
-
//样式 <style> div { padding: 50px; background-color: rgba(255, 0, 0, 0.2); text-align: center; cursor: pointer; } </style> //HTML <p>Click DIV 1:</p> <div onclick="func2()">DIV 2 <div onclick="func1(event)">DIV 1</div> </div> //script <script> function func1(event) { alert("DIV 1"); event.stopPropagation();//阻止事件传播 } function func2() { alert("DIV 2"); } </script>
-
不阻止事件传播的话,当点击DIV2时,事件会继续向上传播,触发父元素DIV1上的func2(),然后会继续向上传播,直到window对象
-
与大雁齐飞,目之所及皆是广袤天空;与苍蝇为伍,所到之处皆是污秽狼藉。
-