jquery - 如何绕过 event.stopPropagation 来触发事件

Question

当我点击一个赞按钮时，我想触发一个事件。我的喜欢按钮是使用插件（WP ulike）生成的。

问题：我可以在我的 div 上的任何地方触发一个点击事件，除了我的按钮。我做了一些研究，发现 event.stopPropagation() 可以做到这一点。

我检查了 WP ulike 插件文件并看到了这个：

_initLike: function(event) {
// Prevents further propagation of the current event in the capturing and bubbling phases
event.stopPropagation();

有没有办法在不修改插件的情况下绕过这个？如果作者添加了这个，那是有原因的。但我绝对需要在点击时触发一个事件。

我的 JS：

$("body").on("click", "#likebox", function() {
alert('click');
});

或者

$("body").on("click", ".thebutton", function() {
alert('click');
});

我的 HTML：

<div id="likebox">
<button class="thebutton"></div>
</div>

此外，当单击按钮时，这是触发事件（在 JS 文件中看到）：WordpressUlikeLoading

也许我可以用这个做点什么？

标签： jquerywordpress

Answer 1

不确定您的情况，但您可以尝试在创建元素后处理“死区”创建新的事件绑定器，例如：

document.getElementById("add").addEventListener("click", function(e) {
    alert("eeeeee");
}, true);

// find element
var banner = $("#banner-message");

function changeColor() {
  setTimeout(function() {
    banner.removeClass("alt");
    alert('Your function');
  }, 1000)
}

// simulating async creation of element
var button = $("<button>", {
  text: "Change color",
  id: "add"
}).on("click", function(event) {
  event.stopPropagation();
  banner.addClass("alt");
  alert('button click');
}).appendTo(banner);



document.getElementById("add").addEventListener("click", function(e) {
  changeColor()
}, true);

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://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
</div>

另一种方法（我们可以称之为 ["quick fix", "workaround", "gambiarra", "Macgyver"]）。但对你有用的是，通过 CSS 将你的事件绑定到父叠加元素，然后触发原始事件。就像是：

// find element
    var banner = $("#banner-message");
    
    $(document).on('click', "#overlay-example", function(e) {
    	changeColor();
      $(this).find('button#add').click();
    });

    function changeColor() {
      banner.removeClass("alt");
      alert('Your function');
    }

    // simulating async creation of element
    var button = $("<button>", {
      text: "Change color",
      id: "add"
    }).on("click", function(event) {
      event.stopPropagation();
      banner.addClass("alt");
      alert('button click');
    }).appendTo(banner.find('#overlay-example'));

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

/* */
#banner-message #overlay-example {
  z-index: 10;
}

#banner-message #overlay-example #add {
  z-index: 0;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <div id="overlay-example">
  
  </div>
</div>