前述：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. vue-cli跳转到新页面的顶部

    我这里有两种方法都是可以用的 1,利用vue-router的默认模式hash,可以记录上一页的位置,如果需要点话,如果没有记录,在进入新页面的时候是返回到新页面的最顶部的 scrollBehavior ...

  2. 转 c#性能优化秘密

    原文:http://www.dotnetperls.com/optimization Generally, using the simplest features of the language pr ...

  3. tyflow birth节点

    0-50帧,持续出生5颗粒子,若范围为0-0,5颗粒子将在第一帧全部出生 每一帧出生5颗粒子,直到50帧结束 连续发射,在0-500帧范围内,每5颗粒子出生后,继续出生5颗 5颗粒子出生后持续50帧, ...

  4. dedecms 文章根据 权重排序

    原文链接 一: dede:list   标签 找到 /include/arc.listview.class.php if($orderby=="senddate" || $orde ...

  5. 错误：Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file

    Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file: /tmp/hsperfdat ...

  6. Rewrite JSON project with Fetch

    上传 JSON 数据 使用fetch()来发布json编码的数据. var url = 'https://example.com/profile'; var data = {username: 'ex ...

  7. 贪心算法----区间覆盖问题(POJ2376)

    题目: 题目的大概意思是约翰这个农民有N条牛,这些牛可以在一天中的某个时间段可以进行工作,他想把这个时间段分成若干个片段让这些牛去进行打扫任务,你的任务是安排尽量少的牛然后可以完成分成这些片段的打扫任 ...

  8. [Swift]LeetCode29. 两数相除 | Divide Two Integers

    Given two integers dividend and divisor, divide two integers without using multiplication, division ...

  9. [Swift]LeetCode89. 格雷编码 | Gray Code

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  10. [Swift]LeetCode412. Fizz Buzz

    Write a program that outputs the string representation of numbers from 1 to n. But for multiples of ...