HLJ 发布于
2018-08-13 17:53:55

阻止事件冒泡、取消默认事件

上一篇文章:

js中获取键盘事件

下一篇文章:

关于axios发送两次请求

1、事件冒泡的由来!
事件发生需要有事件源,即引发这个事件的对象。
事件发生后,事件源本身没有处理事件的能力,如:我们给div添加一个点击事件,但div本身并不能处理这个事件,事件必须传播,达到能够处理本事件的代码中。就是要找到处理该div点击事件的函数。
事件冒泡:就是通过事件冒泡找到找到处理点击事件的函数。事件冒泡是根据DOM中的对象树,以此向上查找。如果父节点有执行该点击事件的函数或可执行的语句,就执行函数或语句;然后事件继续向上传播,类似查找到爷倍节点等等。

2、阻止事件冒泡事例
<body>
  <div class="one" style="width:200px;height:200px;background:green;"> 
    <div class="two" style="width:150px;height:150px;background:yellow;"> 
      <div class="three" style="width: 100px;height: 100px;background: lightblue;">
        <a href="http://www.baidu.com">点击进入百度</a>
      </div> 
    </div> 
  </div>
</body>
(1)、通过stopPropagation()方法只阻止一个事件冒泡
$('.three').click(function(e){ 
  alert('four'); 
  //阻止起泡
  e.stopPropagation();
}); 
(2)、通过preventDefault()方法取消默认行为
$('.three').click(function(e){ 
  alert('three'); 
  //阻止默认事件
  e.preventDefault();
}); 
(3)、通过返回false取消默认行为和阻止事件冒泡
$('.three').click(function(e){ 
  alert('three'); 
  //阻止默认事件和阻止冒泡
  return false;
});
3、总结;
stopPropagation()方法阻止事件冒泡;
preventDefault()方法阻止默认事件;
return false;阻止默认行为和阻止事件冒泡;
文章来源:转载自https://blog.csdn.net/xuexizhe88/article/details/55256760
最后生成于 2023-06-18 18:29:45
上一篇文章:

js中获取键盘事件

下一篇文章:

关于axios发送两次请求

此内容有帮助 ?
0