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

    转:https://blog.csdn.net/liaokailin/article/details/52077620 zipkin为分布式链路调用监控系统,聚合各业务系统调用延迟数据,达到链路调用监 ...

  2. JS 多选文件或者选择文件夹

    <%--文件多选--%> <input type="file" name="file" id="file" multipl ...

  3. ora-01033 oracle initialization or

    这次出现这个问题是源于错删了 DBF文件. 解决方案如下: 1.打开SQL Plus 最后把你删掉的那个文件的表空间删掉就好了

  4. MVC是什么

    MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...

  5. 在 Android 的文字编辑控件 (TEdit) 中, 如何按下 Enter 就隐藏虚拟键盘

    在 Windows 的应用中,我们常常为了让使用者能够快速输入,在Edit元件中的onKeyUp或者 onKeyDown 事件中主动侦测使用者输入的字元是否有换行符号 (Enter),当使用者按下了E ...

  6. Oracle：WITH AS () Merge ?

    WITH AS 语法在SQL SERVER 和ORACLE数据库上均支持,主要用于子查询.语法如下: WITH expression_name [ ( column_name [,...n] ) ] ...

  7. Dora.Interception，为.NET Core度身打造的AOP框架 [5]：轻松地实现与其他AOP框架的整合

    这里所谓的与第三方AOP框架的整合不是说改变Dora.Interception现有的编程,而是恰好相反,即在不改变现有编程模式下采用第三方AOP框架或者自行实现的拦截机制.虽然我们默认提供基于IL E ...

  8. HttpClient 调用WebAPI时，传参的三种方式

    public void Post() { //方法一,传json参数 var d = new { username = " ", password = " ", ...

  9. html5 postMessage 实现类似 sendMessage 的同步效果，支持跨域

    实现一个客户端发送 “save 一个答案,在获取答案, 跨域的另一个页面中,回调返回”3“的场景. 客户端:请在 http://127.0.0.1/pk/index.html 打开 <html& ...

  10. div里包含img底部多出3px的解决办法

    如果将一个img放在div里面,你会发现在img下面无端端的就多出3px的空白出来.padding.margin.border都设为0,无效!那么怎么解决这个问题呢? 问题图: 解决后的效果: 这个B ...