javascript - 单击父级时调用子级单击事件

Question

基本上我有一个第三方插件，它在点击这个按钮时添加一个按钮，一个特定的功能就完成了。

现在我将它包装button成一个div. 现在我希望当我点击这个包装器时div，它应该点击button它里面的那个。

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

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

  // What shall I place here to stop parent calling itself
})

// This is 3rd party service that is handling this.
button.on("click", function() {
  console.log('I am called here');
})

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;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<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>

演示：https ://jsfiddle.net/8a33n7qg/

问题：div单击时=>按钮单击完成=>按钮单击再次传播到父级=>然后再次单击按钮等等。

所以我想在第一次之后停止这个，我无法更改第三方插件，我正在避免全局解决方案。有什么简单的解决方案吗？

注意：我无法更改按钮代码，因为它来自第三方插件

感谢您的时间

标签： javascriptjqueryhtml

Answer 1

您需要调用stopPropagation()从子按钮引发的事件，而不是div您的评论所建议的父：

var $banner = $("#banner-message");
var $button = $("button");

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

$button.on("click", function(e) {
  e.stopPropagation();
  console.log('I am called here');
})

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;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<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>

我无法更改第三方插件，我尝试用小代码展示一个演示，按钮点击在第三方插件中处理。

在这种情况下，您可以使用targetclick 事件的属性div来检查按钮是否是触发元素，如果是，则不执行任何操作：

var $banner = $("#banner-message");
var $button = $("button");

$banner.click(function(e) {
  if ($(e.target).is('button')) 
    return false; 
    
  console.log('Parent is calling child');    
  $button.trigger('click');
})

$button.on("click", function() {
  console.log('I am called here');
})

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;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<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>