event.stopPropagation()和event.preventDefault()
2024-10-21 03:19:36
什么是事件冒泡,事件捕获?
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
1.event.stopPropagation()方法
这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,
2.event.preventDefault()方法
这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
3.return false ;
这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
demo:
div与css代码:
.box1{
height: 200px;
width: 600px;
margin: 0 auto;
}
.box1 a{
display: block;
height: 50%;
width: 50%;
background:red;
} <div class="box1">
<a href="http://www.baidu.com" target="_blank"></a>
</div>
js代码:
情况1:不阻止事件冒泡和默认事件
//不阻止事件冒泡和默认事件
$(".box1").click(function(){
console.log("1")//不阻止事件冒泡会打印1,页面跳转;
});
情况2:阻止冒泡
//阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();//不会打印1,但是页面会跳转; }); $(".box1").click(function(){
console.log("1");
});
情况3:阻止默认事件
$(".box1 a").click(function(event){
//阻止默认事件
event.preventDefault();//页面不会跳转,但是会打印出1,
}); $(".box1").click(function(){
console.log("1");
});
情况4:阻止冒泡和阻止默认事件
$(".box1").click(function(){
console.log("1");
});
//阻止冒泡
$(".box1 a").click(function(event){
event.stopPropagation();
//阻止默认事件
event.preventDefault() //页面不会跳转,也不会打印出1
})
情况5:使用false,等于同时调用event.stopPropagation()和event.preventDefault()
$(".box1").click(function(){
console.log("1")
});
$(".box1 a").click(function(event){
return false; //页面不会跳转,也不会打印出1,等于同时调用了event.stopPropagation()和event.preventDefault()
});
原处出处:
祥哥的说
event.stopPropagation()和event.preventDefault()
https://blog.csdn.net/qq_39207948/article/details/79408323
最新文章
- SQL Server 2014聚集列存储索引
- Codeforces CF#628 Education 8 F. Bear and Fair Set
- js之事件冒泡和事件捕获详细介绍
- 前端scss的使用及gulp发布方式
- xargs 命令
- [Linux][Hadoop] 将hadoop跑起来
- Bootstrap:表格和栅格分页
- HDU 1505 City Game (hdu1506 dp二维加强版)
- javascript editor
- spring mvc DispatcherServlet详解之三---request通过ModelAndView中获取View实例的过程
- bzoj 3831 Little Bird (单调队列优化dp)
- java集合系列——Map之HashMap介绍(八)
- Java JMS 程序基础 与 ActiveMQ 安装(一)
- Oracle ERP Audit Funtion in R12.2.4
- 分享今天在客户那里遇到的SQLSERVER连接超时以及我的解决办法
- vector,deque,list的区别和使用
- P4385 [COCI2009]Dvapravca
- 微信小程序——文本的展开与收起
- 获取客户端真实ip地址(无视代理)
- 使用IPMI控制/监控Linux服务器