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> ...
随机推荐
- Oracle数据库之SQLPLUS
三.SQLPLUS SQLPlus 是 Oracle 数据库提供的一个专门用于数据库管理的交互式工具,使用 SQLPlus 可以管理 Oracle 数据库的所有任务,SQLPlus 通过命令的方式 ...
- tensorflow中的batch_norm以及tf.control_dependencies和tf.GraphKeys.UPDATE_OPS的探究
https://blog.csdn.net/huitailangyz/article/details/85015611#
- spring boot整合mybatis框架及增删改查（jsp视图）
工具:idea.SQLyog 版本:springboot1.5.9版本.mysql5.1.62 第一步:新建项目 第二步:整合依赖(pom.xml) <dependencies> < ...
- Leetcode之回溯法专题-46. 全排列（Permutations）
Leetcode之回溯法专题-46. 全排列(Permutations) 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3, ...
- 【转载】Windows api数据类型
最近在接触windows api函数,看到了很多之前没有看到过的数据类型,发现“个人图书馆”中有个帖子说的挺详细的,特地搬运过来 Windows 数据类型 Delphi 数据类型 描述 LPSTR P ...
- DOM的高级操作-一种JS控制元素的视觉假象
1.运动中的边界处理(让其在一个指定区域内运动) 当元素的offsetLeft值超出一定距离或达到一个我们想要设置的边界值时,停止计时器. var timer; timer = setInterval ...
- 杭电多校第九场 HDU6415 Rikka with Nash Equilibrium dp
Rikka with Nash Equilibrium Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 524288/524288 K ...
- hdu 1176免费馅饼（记忆化搜索）
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 题意不解释了 简单的记忆化搜索可以拿来练练手,注意要从pos = 5 开始搜索 #include ...
- 洛谷 P4206 [NOI2005]聪聪与可可 题解
题面 输入 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行,每 ...
- Go语言os标准库常用方法
1. os.Getwd()函数 原型:func Getwd()(pwd string, err error) 作用:获取当前文件路径 返回:当前文件路径的字符串和一个err信息 示例: package ...