jquery父级元素中定义点击事件,来触发特定子元素的点击事件
时间:2018-11-15
本文章向大家介绍jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递,需要的朋友可以参考一下
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递。
但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问题。 但是这么做的后果,在jquery1.8.2版本及以后所有版本(截止目前最新版本为3.3),会出现事件来回传递的问题,最终导致无限循环。
在jquery1.2.6版本中,子元素的点击传递给父元素时,再被父元素传递回来后,事件就不会再向外扩散了,也就是低级版本jquery只会向外扩散一次,但是在最新版本却取消了这个限制,不知所以然。。。
解决方案也很简单:
1-不变更DOM结构的情况下,阻止子元素的事件向外扩散。 可以使用:window.event.stopPropagation();
2-将需要传递事件的父元素拆分到别处,即不让传递事件之间的两者形成父子元素关系即可。
3-删除事件传递,哪里点击哪里添加。
以下还原父子元素点击事件无限传递的示例:
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!--<script src="jquery.js"></script>--> </head> <body> <div id="a"> <a id="b">Test</a> </div> </body> </html> <script> var i = 0; $("#a").click(function () { $("#b").click(); }); $("#b").click(function () { i++; alert(i); }); </script>
- 每天一个Linux命令(4)——mkdir
- 每天一个Linux命令(3)——pwd
- 11-移动端开发教程-zepto.js入门教程
- 【OpenCV学习笔记之一】图像加载,修改及保存
- 【干货】一种直观的方法认识梯度下降
- 漫谈Java IO之普通IO流与BIO服务器
- 浅谈强化学习的方法及学习路线
- 【亲测有效】Win10家庭版Microsoft Edge页面出现乱码的两种解决方案及gpedit.msc命令无法使用的解决策略
- Fiddler抓包7-post请求(json)
- Selenium2+python自动化56-unittest之断言(assert)
- 长文 | 手把手教你如何使用python进行数据分析(最好将文章代码自己码一遍)
- 回归与梯度下降法及实现原理
- 【宅男宅女们的福音】电影天堂最新电影爬取及搜索脚本
- 把模块有关联的放在一个文件夹中 在python2中调用文件夹名会直接失败 在python3中调用会成功,但是调用不能成功的解决方案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- FlutterDojo设计之道—状态管理之路(五)
- Python高级进阶(一)Python框架之Django入门
- python 自动化测试(2):针对密码输入框为密码控件时的解决方案
- 微信小程序开发之视图容器swiper
- WINDOWS服务器同时安装多个版本的MYSQL的方法,MQYSQL5和MQYSQL8的共存。
- 使用PHP对接国外的PAYPAL支付最新REST API接口。
- golang 学习(10): 使用go语言调用c语言的so动态库
- Django的form,model自定制
- 排序算法与查找算法
- nginx学习(1): openresty安装
- 2020年8月26日更新WINDOWS服务器同时安装多个版本的MYSQL的方法,MQYSQL5和MQYSQL8的共存。
- python 自动化测试(3):数据库连接与使用
- 微信小程序实战开发二:微信小程序 WEUL组件之 画廊组件
- 关于Cookie和Session
- 微信小程序实战开发一:在小程序中使用useExtendedLib方法引入官方UI