jquery父元素和子元素點選事件傳遞問題_不可把父元素的事件傳遞給子元素_事件無限迴圈傳遞
阿新 • • 發佈：2018-11-15
前述：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>