event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件，但一直不是很懂它和preventDefault()等的区别，今天查了查文档和大神们的博客，在这里对相关知识点做一个总结
首先开门见山，总结一下这三者的区别：
event.stopPropagation():阻止事件冒泡，对默认事件无影响
event.preventDefault():阻止默认事件，和事件冒泡无关
return false：原生js中，阻止默认事件，jQuery中既会阻止默认事件又会阻止事件冒泡
这样理解起来可能不是很清晰，我们都知道，a标签的默认事件之一为点击链接跳转，让我们做一个与此相关的小demo加深一下印象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{width: 100px;height: 100px;border: 1px solid #ccc;}
div a{display: block;width: 30px;height: 100px;background: skyblue;}
</style>
</head>
<body>
<div id="box1">
<a href="http://www.baidu.com"></a>
</div>
<div id="box2">
<a href="http://www.baidu.com"></a>
</div>
<div id="box3">
<a href="http://www.baidu.com"></a>
</div>
<div id="box4">
<a href="http://www.baidu.com"></a>
</div>
<div id="box5">
<a href="#"></a>
</div>
<script>
/*event.stopPropagation()&&event.preventDefault()&&return false*/
box1.onclick=function(){
console.log("parent");
}//不阻止默认事件和冒泡，打印并且跳转
/*event.stopPropagtion()，阻止事件冒泡，但不影响默认事件*/
box2.onclick=function(){
console.log("parent");
}
box2.children[0].onclick=function(event){
event.stopPropagation();//仅跳转，冒泡被阻止
} /*event.preventDefault(),阻止默认事件，但冒泡不被阻止*/
box3.onclick=function(){
console.log("parent");
}
box3.children[0].onclick=function(event){
event.preventDefault();//打印parent，不跳转
} /*return false; 在原生中，该方法仅会阻止默认事件，相当于调用了event.preventDefault()，但在jQuery中，它
会同时阻止事件冒泡和默认事件*/
box4.onclick=function(){
console.log("parent");
}
box4.children[0].onclick=function(){
return false;
}</script> </body>
</html>
event.stopPropagation()、event.preventDefault()与return false的区别的更多相关文章
- event.stopPropagation()，event.preventDefault()和return false的区别
event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...
- 【转】stopPropagation, preventDefault 和 return false 的区别
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagat ...
- stopPropagation, preventDefault 和 return false 的区别
因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagati ...
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()和event.preventDefault()，return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...
- 【前端】stopPropagation, preventDefault, return false的区别
e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...
- event.preventDefault() vs. return false
使用jquery方式的话,以下是等效的 return false === event.stopPropagation + event.preventDefault() //1. event.preve ...
- js的stopPropagation()、cancelBubble、preventDefault()、return false的分析
个人笔记,如有错误,望指出. 事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> ...
随机推荐
- Eclipse中安装JRebel热部署教程
Eclipse中安装JRebel热部署教程 前言 Eclipse安装JRebel插件可快速实现热部署,节省了大量重启时间,提高开发效率. 本文只介绍Eclipse安装JRebel插件版本 ...
- Nacos（七）：Nacos共享配置
前言 本文参考文章: SpringCloud Alibaba - Nacos Config 自定义共享配置 前景回顾: Nacos(六):多环境下如何"管理"及"隔离&q ...
- JVM内存机制与垃圾收集器总结
本文目录 1. JVM内存组成结构 2. JVM内存回收 3. 垃圾收集器与算法 4. jdk1.6中class文件结构 5. jdk1.6 1.7 1.8比较 1. JVM内存组成结构 JVM栈由堆 ...
- helm部署Redis哨兵集群
介绍 Redis Sentinel集群是由若干Sentinel节点组成的分布式集群,可以实现故障发现.故障自动转移.配置中心和客户端通知. 如下图: Redis Sentinel 故障转移过程: 从这 ...
- P2564 [SCOI2009]生日礼物 贪心
https://www.luogu.org/problemnew/show/P2564) 题意 有n个珠子,包括k中颜色,找出长度最小的一个区间,使得这个区间中包含所有的颜色. 思路 把n个珠子按照位 ...
- CodeForces 1107 F Vasya and Endless Credits
题目传送门 题解: 需要注意到的是 每个offer都获益都是会随着时间的增加而渐少(或不变). 所以我们可以知道,最多在第n个月的时候这个人会买车离开. solve1:最优2分图匹配 我们可以把每个月 ...
- hdu6333 Harvest of Apples 离线+分块+组合数学（求组合数模板）
Problem B. Harvest of Apples Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K ...
- Atcoder D - 3N Numbers（优先队列+dp）
题目链接:http://abc062.contest.atcoder.jp/tasks/arc074_b 题意:给出3*n个数要求去掉n个数使得剩下的前n个数-后n个数的差最大. 题解:显然是一道如果 ...
- codeforces 807 D. Dynamic Problem Scoring（贪心+思维）
题目链接:http://codeforces.com/contest/807/problem/D 题意:对于动态计分的 Codeforces Round ,已知每题的 score 是根据 Round ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...