Question

我希望能够激活元素的侦听器而不激活包含我的元素的div的侦听器。

$('body').on('click', '.thiscoll', function(){
    if (type === "form") {
        hidePanels();
        $('#navbar-pannel').show();
    }
});

$('#main_container').on('click', 'a', function(){
    hidePanels();
    $('#custom-nav').show();

    $('#l-name').html("New link name");
    $('#l-destination').html("New link destination");
});

第一个侦听器位于我的div上，而第二个侦听器位于我的div中包含的链接上。当我单击链接时，它首先触发“ a”侦听器，然后触发“ .thiscoll”侦听器，而我只想触发“ a”侦听器。

有可能吗？

谢谢。

Answer 1

长话短说，您想停止事件传播。像

$('a').on('click', function(event) {
    event.stopPropagation();
    // and possibly do something else you require
});

应该做。

Answer 2

是的，您想要的是可能的。使用Javascript中的事件，我们可以将其称为 event capture 和 event bubbling 。默认情况下，浏览器将在冒泡阶段注册事件。

对于您来说，这意味着您单击的目标将首先触发其事件处理程序。然后是其父母的。然后是其父母的父母的父母，依此类推。您可以在MDN

上了解更多信息

要停止这种传播，可以在stopPropagtion对象上使用Event方法。 Event对象是事件监听器中的第一个参数：

const main = document.querySelector('.main');
const button = document.querySelector('.button');
const stopPropagation = document.getElementById('stopPropagation');

main.addEventListener('click', () => console.log('Clicked on main'));

button.addEventListener('click', (evt) => {
  if (stopPropagation.checked) {
    evt.stopPropagation();
  }
  console.log('clicked button');
});

<input id="stopPropagation" type="checkbox">
<label for="stopPropagation">stopPropagation</label>

<div class="main">
  Hello, World
  <button class="button">Button</button>
</div>

在div中激活元素的侦听器而不激活div的侦听器

2 个答案: