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

也许我可以对此做些什么？

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>

另一种方法（我们可以将其称为[“快速修复”，“解决方法”，“ 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>

如何绕过event.stopPropagation触发事件

1 个答案: