• jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递


    前述: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>
  • 相关阅读:
    37-Data Volume 之 bind mount
    Python encode和decode
    Python迭代器,生成器(iterator,generator)详解
    Python递归函数
    pandas.DataFrame的pivot()和unstack()实现行转列
    Python XML解析之DOM
    Python XML解析之ElementTree
    Oracle 12c用户和安全管理
    Oracle 12c RAC 静默安装文档
    Oracle 12c RAC 安装文档
  • 原文地址:https://www.cnblogs.com/lxhbky/p/9963050.html
Copyright © 2020-2023  润新知