前述：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. NPOI操作创建Excel

    一.下载NPOI类库 使用Nuget在线搜索NPOI,下载安装 二.代码开撸 var workBook = new HSSFWorkbook(); #region 设置样式 IFont font = ...

  2. MVC Ajax上传文件

    前台:首先要导入jQuery <html><head> <meta name="viewport" content="width=devic ...

  3. ubuntu显卡驱动安装

    1.确定显卡型号 网上有些使用lspci | grep -i nvidia可以查看显卡型号,但是我的好像查不到具体型号,如下图. 但是后来我知道了安装的是1080Ti,所以也就明确了型号.驱动在(ht ...

  4. 对象池----unity中应用

    对象池应用在unity中能减少资源消耗,节省内存空间具体原理不再赘述. 以下是他的操作步骤:(注意:对象池中应用到了栈或对队列!) 1).先建立一个(怪物)物体   mMonster; 2).再建立一 ...

  5. 安卓开发学习笔记（二）：如何用Android Stuidio在res资源下创建xml视图文件

    笔者在看了相关的教程之后发现教程当中的资源已经过时了.当我们在创建了一个新的空白的工程之后,会发现其文件夹下面的分文件夹目录和官方的教程文件结构完全不同,因此会引起很多误解.笔者使用的是最新版的And ...

  6. 微信小程序 open-data更改样式 open-data 显示头像 圆形

    废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zh ...

  7. Java并发编程基础之volatile

    首先简单介绍一下volatile的应用,volatile作为Java多线程中轻量级的同步措施,保证了多线程环境中“共享变量”的可见性.这里的可见性简单而言可以理解为当一个线程修改了一个共享变量的时候, ...

  8. Thread.join(), CountDownLatch、CyclicBarrier和 Semaphore区别,联系及应用

    在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch,CyclicBarrier和Semaphore,今天我们就来学习一下这三个辅助类的用法, 由于 ...

  9. [Swift]LeetCode454. 四数相加 II | 4Sum II

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l)there are such th ...

  10. Mysql、Hbuilder、Idea快捷键

    MyEclipse 快捷键 ↑ ↓ ← →多 1.方法抽取,Alt+Shift+M 2.多行注释:Ctrl+Shift+/ 3.对象.方法; Ctrl+2 + ↓+回车 ,自动生成返回类型和变量 (非 ...