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> ...
随机推荐
- 分享各大CMS采集资源站网址合集
分享各大CMS采集资源站网址合集 http://www.172zy.xyz/ 172云资源 http://www.dbzyz.com/ 豆瓣云资源 http://www.gaoqingzy.com/ ...
- Spring学习之旅(七)--SpringMVC视图
在之前的实例中我们只是在 Controller 中返回了 home 字符类型的值,而没有直接生成可以在浏览器中直接渲染的 HTML,这是因为 SpringMVC 将请求处理的逻辑和视图渲染的实现进行了 ...
- Liunx软件安装之Zabbix监控软件
Zabbix 是什么 zabbix(音同 za:bix)是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix 能监视各种网络参数,保证服务器系统的安全运营 ...
- CodeForces 909C
题意略. 思路: 开始的时候,定义dp[i]:当前行在第i行,i~n有多少种排列方式,如果i为f,那么dp[i] = dp[i + 1],因为第i + 1条语句只能放在f后且向右缩进一位: 如果i为s ...
- python 生成式，生成器，迭代器，可迭代
1.生成器就是迭代器2.生成式用[](中括号)包起来,生成器用()(圆括号)包起来3.生成式在使用前已经在内存中存在,生成器只有在使用时才生成4.迭代器是可以用.__next__()不断取出下一值,直 ...
- Python字典排序问题
字典的问题 navagation: 1.问题来源 2.dict的学习 *3.numpy的应用 1.问题来源 在做cs231n,assigment1-kNN实现的时候,需要对一个列表中的元素进行计数,并 ...
- python控制窗口移动（画圆）
import win32con import win32gui import time import math notepad = win32gui.FindWindow("Notepad& ...
- SCRUM术语
http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-2 Scrum: Scrum无对应中文翻译 Agile: ...
- 检查python标识符是否有效
- 手工释放服务器的swap分区缓存
时间 恢复时间 状态 信息 主机 问题 • 严重性 持续时间 确认 动作 2019-03-21 20:29:30 09:51:30 -ai-代理 Lack of free sw ...