js阻止默认事件（a标签跳转），阻止事件冒泡

曾经终败给现在 2022-01-26 01:15 602阅读 0赞

最近刚学习完js基础，今天发现对js的默认事件阻止以及阻止事件的冒泡有点忘记，于是写这篇文章算是做一个总结，也是加深一下印象。

1.阻止默认事件

在html中有很多自带默认事件的元素，很典型的例子：a标签，如果给a标签绑定点击事件，触发后页面会有一个刷新，是a链接默认的跳转事件，阻止这个有很多方法

给a标签中href属性添加
  1. <a href="javascript:;">链接</a>
  3. <a href="javascript:void(0);">链接</a>
给绑定的事件添加return false
  1. <a href="" id="link">链接</a>
  3. <script>
  4.         document.getElementById("link").onclick = function (){
  5.             console.log("666");
  6.             return false;
  7.         }
  8. </script>
使用event事件里的方法
  1. <a href="" id="link">链接</a>
  3. <script>
  4.     document.getElementById("link").onclick = function (e){
  5.         console.log("666");
  6.         e.preventDefault();
  7.     }
  8. </script>

这个preventDefault()是event阻止默认事件的方法，这里只是用a标签举个例子

2.阻止事件冒泡

结构

  1. <div id="box1">
  2.     <div id="box2">
  3.         <div id="box3"></div>
  4.     </div>
  5. </div>

样式

  1. <style>
  2.         #box1{
  3.             width: 250px;
  4.             height: 250px;
  5.             background-color: pink;
  6.         }
  7.         #box2{
  8.             width: 150px;
  9.             height: 150px;
  10.             background-color: lightcoral;
  11.         }
  12.         #box3{
  13.             width: 70px;
  14.             height: 70px;
  15.             background-color: lightgreen;
  16.         }
  17.     </style>

js

  1. my$("box3").onclick = function (event) {
  2.         console.log("里面的盒子");
  3. }
  4. my$("box2").onclick = function () {
  5.         console.log("中间的盒子")
  6. }
  7. my$("box1").onclick = function () {
  8.         console.log("外边的盒子")
  9. }

此时点击最里边的小盒子，控制台输出的是这样的

  1. 里面的盒子
  2. 中间的盒子
  3. 外边的盒子

这就是事件的冒泡，从内向外
event鼠标事件对象中stopPropagation()方法来阻止冒泡
在要阻止的对象事件中加入

  1. my$("box3").onclick = function (event) {
  2.         console.log("里面的盒子");
  3.         //阻止事件冒泡   event鼠标的事件对象
  4.         event.stopPropagation(); 
  5. }

此时的控制台输出为

  1. 里面的盒子

阻止事件冒泡成功

这就是我的一点小总结，算是一个印象加深的过程吧！

发表评论

表情：
评论列表 （有 0 条评论，602人围观）

还没有评论，来说两句吧...

相关阅读