前述：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>

jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递的更多相关文章

  1. 关于jQuery出现的新添加元素点击事件无效

    //通常点击写法: $(".div").on('click', function () { var $this = $(this); var isActive = $this.ha ...

  2. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

  3. a标签嵌套href默认行为与子元素click事件存在影响

    2018-08-07 Question about work 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当<a>标签内部存在嵌套时, 父元素&l ...

  4. 子元素用margin-top 为什么反而作用在父元素上？对使用margin-top 的元素本身不起作用？

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

  5. jquery只获取自身文本节点，不获取子元素的

    jQuery.text()方法时候,会把子元素的文本也获取到,以下方法可获取自身文本节点,不包括子元素 <div id="demo">只获取我<a href=&q ...

  6. 深入子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  7. 深入理解子元素的width与父元素的width关系

    深入理解父元素与子元素的width关系 对于这一部分内容,如果理解准确,可以更容易控制布局,节省不必要的代码,这里将简单研究. 第一部分:父子元素都是内联元素 代码演示如下: <!DOCTYPE ...

  8. 用css完成根据子元素不同书写样式

    我们需要达到的效果: 需要什么 1张图片的, 2张图片的, 3张图片的样式各不相同.可以使用js完成子元素的判断,但是这里我使用css来完成 核心知识点 使用css选择器完成子元素的判断 例子: 用c ...

  9. HTML&CSS基础-子元素的伪类选择器

    HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...

随机推荐

  1. 大数据框架对比：Hadoop、Storm、Samza、Spark和Flink

    转自:https://www.cnblogs.com/reed/p/7730329.html 今天看到一篇讲得比较清晰的框架对比,这几个框架的选择对于初学分布式运算的人来说确实有点迷茫,相信看完这篇文 ...

  2. 源码安装python +NGINX 的坎坷路 +uwsgi安装 部署django 的CRM项目

    一.Nginx安装(基于ubuntu17.10 版本) 首先我们是基于源码安装,主要有如下步骤 1.安装依赖包 1.安装gcc g++的依赖库 sudo apt-get install build-e ...

  3. Linux Rabbit的使用

    安装RabbitMQ 1.安装Erlang yum -y install epel-release yum -y update yum -y install erlang socat yum -y i ...

  4. LSI IBM服务器阵列卡操作经历

    说明:因为服务器的一个磁盘坏了,因为没有经验不敢操作.正好有一台撤下来的相同服务器,所以查找了各种教程,研究了一下各种操作.记录在这里,防止忘记.一.概念说明raid(自己百度)阵列卡组(group) ...

  5. python语法_模块_re(正则表达)

    字符串操作方法有: s = 'hello word' s.find('l') 查询第一个l的索引 s.replace('ll','xx') 替换 s.split('w') 以w进行分割 这些都是完全匹 ...

  6. Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像

    绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...

  7. [Swift]LeetCode410. 分割数组的最大值 | Split Array Largest Sum

    Given an array which consists of non-negative integers and an integer m, you can split the array int ...

  8. [Swift]LeetCode729. 我的日程安排表 I | My Calendar I

    Implement a MyCalendar class to store your events. A new event can be added if adding the event will ...

  9. Ubuntu12.04中的虚拟机安装Ubuntu16.04，并实现远程控制16.04

    目录 1.设置网络连接 1.1 VMware虚拟机网络地址设置 1.2 设置虚拟机内Ubuntu16.04的网络模式 未开机状态下 开机状态下 1.3 查看虚拟机中Ubuntu16.04的IP 2.进 ...

  10. performance数据

    // 获取 performance 数据 var performance = { // memory 是非标准属性,只在 Chrome 有 // 财富问题:我有多少内存 memory: { usedJ ...