Как обойти 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

Может быть, я мог бы что-то сделать с этим?

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", "обходной путь", "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>