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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM