前述：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. nvidia-smi GPU异常消失 程序中断

    GPU型号为NVIDIA的1080Ti,最近出现的状况的是某一个GPU突然就出问题了,如果在该GPU上有运行程序的话则程序中断,nvidia-smi显示出来的GPU则少了这一个. 1.一开始怀疑是温度 ...

  2. Linux的小知识点

    uname 2.whereis 3.df 4.which 5.apt和dpkg 6.service 7./etc/init.d/ 8.netstat -anptu 查看端口占用 9.netstat 1 ...

  3. SSIS - 4.使用表达式任务和脚本任务实现更改变量和输出变量值

    一.脚本任务 脚本任务是SSIS包中功能很强大的组件,尤其当内置的任务无法实现我们需要的功能的时候,我们都可以使用脚本任务来实现.脚本任务使用VSTA(Microsoft Visual Studio ...

  4. HTTP长连接和短连接 + Websocket

    HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接.HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议.IP协议主要解决网络路由和寻址问题,T ...

  5. LeetCode题解41.First Missing Positive

    41. First Missing Positive Given an unsorted integer array, find the first missing positive integer. ...

  6. [Swift]LeetCode461. 汉明距离 | Hamming Distance

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  7. [Swift]LeetCode650. 只有两个键的键盘 | 2 Keys Keyboard

    Initially on a notepad only one character 'A' is present. You can perform two operations on this not ...

  8. [Swift]LeetCode994. 腐烂的橘子 | Rotting Oranges

    In a given grid, each cell can have one of three values: the value 0 representing an empty cell; the ...

  9. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  10. less环境的安装与搭建

    less: Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node 或浏 ...