点击父div触发子button点击事件，如何阻止循环触发？

这个问题的核心是事件冒泡：你点击父div后触发了按钮的点击，而按钮的点击事件又会向上冒泡到父div，导致再次触发按钮点击，形成无限循环。既然你不能修改第三方插件的按钮代码，这里有两个简便的局部解决方案：

方案一：使用triggerHandler()替代trigger() #

jQuery的triggerHandler()方法只会触发目标元素的事件处理函数，不会触发事件冒泡，也不会执行元素的默认行为，刚好能打破循环。

修改你的父元素点击事件代码即可：

banner.click(function() {
  console.log('Parent is calling child');
  // 用triggerHandler替代trigger，避免事件冒泡
  button.triggerHandler('click');
})

方案二：在父元素点击事件中过滤事件来源 #

如果因为某些原因不能用triggerHandler，可以在父元素的点击事件里判断事件的触发源：如果是按钮本身冒泡过来的点击，就跳过执行逻辑。

banner.click(function(e) {
  // 如果点击的是按钮本身，或者事件是由按钮触发冒泡过来的，直接返回
  if (e.target === button[0] || e.isTrigger) {
    return;
  }
  console.log('Parent is calling child');
  button.trigger('click');
})

为什么这两种方法有效？ #

• 方案一的triggerHandler从根源上避免了事件冒泡，按钮的点击事件不会传递回父div，自然不会触发循环。
• 方案二则是通过判断事件的来源，区分用户主动点击父div和按钮冒泡过来的点击，只在用户点击父div时才触发按钮的点击。

修改后的完整代码示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

// find elements
var banner = $("#banner-message")
var button = $("button")

banner.click(function() {
  console.log('Parent is calling child');
  button.triggerHandler('click');
})

// 第三方插件的按钮点击逻辑（无法修改）
button.on("click", function() {
  console.log('I am called here');
})

内容的提问来源于stack exchange，提问作者sanjeev