event.stopPropagation()和event.preventDefault(),return false的区别
我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧
跟冒泡事件相关的,我想到三个:
1、event.stopPropagation():阻止冒泡事件,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个链接,这个链接仍然会被打开;
2、event.preventDefault():阻止默认事件,调用此方法是,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
3、return false:这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,链接不会被打开,事件也不会传递到上一层的父元素,可以理解为 return false 就等于同时调用了event.stopPropagation()和event.preventDefault()。
event.stopPropagation()和event.preventDefault(),return false的区别的更多相关文章
- 【前端】stopPropagation, preventDefault, return false的区别
e.stopPropagation()阻止事件冒泡或者捕获 因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPro ...
- 原生js中stopPropagation,preventDefault,return false的区别
1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div' onclick='alert("div") ...
- JS 之 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- event.stopPropagation(),event.preventDefault()和return false的区别
event.stopPropagation(),event.preventDefault()和return false的区别 1.event.stopPropagation()方法 这是阻止事件的冒泡 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- event.stopPropagation()、event.preventDefault()与return false的区别
做小demo时经常用到return false来取消默认事件,但一直不是很懂它和preventDefault()等的区别,今天查了查文档和大神们的博客,在这里对相关知识点做一个总结 首先开门见山,总结 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- event.stopPropagation()和event.preventDefault()
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- vue 中 event.stopPropagation() 和event.preventDefault() 使用
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...
随机推荐
- sql中循环的存储过程
), a2 bigint, a3 bigint) returns void as $$declare ii integer; begin II:; FOR ii IN a2..a3 LOOP INSE ...
- 数位dp(不要62)
http://acm.hdu.edu.cn/showproblem.php?pid=2089 题意:求区间内满足以下条件的数量 1.数位不能出现4,2.任意两相邻数位不能是62. 解法:数位dp[po ...
- AppCan适配问题
使用AppCan调试中心时,屏幕适配是个问题,经过多次调试总结出如下经验: 1,使用HD+(1560 x 720):显示错乱 2,使用FHD+ (2340 x 1080):显示错乱 3,HD (128 ...
- c语言中宏定义#和 ##的作用:
转载:http://www.cnblogs.com/cyttina/archive/2013/05/11/3072969.html 看了这篇文章后了解了,但是文章中的例子比较特别,我在这里加个注释好了 ...
- MySQL数据库入门多实例配置
MySQL数据库入门——多实例配置 前面介绍了相关的基础命令操作,所有的操作都是基于单实例的,mysql多实例在实际生产环境也是非常实用的,因为必须要掌握 1.什么是多实例 多实例就是一台服务器上开启 ...
- SQL的编写顺序和执行顺序,以及空值处理,别名处理,转义字符处理
SQL即结构化查询语言.也就是用来从数据库中操作数据的.数据总的来说就是增删改查CRUD. 一,sql的分类,大致有四类: 1)DDL : 数据定义语言 create alter drop trunc ...
- Flask开发系列之模板
Flask开发系列之模板 本文对<FlaskWeb开发:基于python的Web应用开发实战>模板一节做的总结. Jinja2模板引擎 模板 模板是一个包含响应文本的文件,其中包含用占位变 ...
- time、date、datetime、timestamp和year
在此声明mysql数据库 时间上总共有五中表示方法:它们分别是 time.date.datetime.timestamp和year. time : “hh:mm:ss”格式表示的时间值,格式显示TIM ...
- 有准备的面试才能拿到更好的 Offer
http://www.sohu.com/a/331411917_181657 前几天有读者问我,工作不顺利辞职了.本来以为凭借自己的能力和工作经验可以轻松找到更好的工作,结果投了简历,约面试的很少,面 ...
- Linux20期学习笔记 Day3
管道符.通配符.转义符及部分常用命令.考点