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点击=＆gt;按钮点击完成=＆gt;按钮单击再次传播到parent =＆gt;然后再按一下按钮等等。

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

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

感谢您的时间

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>

我无法更改第三方插件，我尝试使用小代码显示演示，按钮单击在第三方插件中处理。

在这种情况下，您可以使用target上的click事件的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>

Answer 2

只需在处理程序上的按钮中使用event.stopPropagation()即可停止传播事件。

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

2 个答案: