Question

我希望仅在单击div本身时才触发该事件，问题是，当我单击该按钮时也将触发该事件，这不是我想要的。我该怎么办？

document.querySelector('.container').addEventListener('click', e => {
    console.log('click div');
});

<div class="container" >
    <button>Click me</button>
</div>

Answer 1

您可以检查事件目标是否与当前目标匹配，然后运行回调函数：

eventOnCurrentElement(".container", "click", e => {
   console.log("clicked div");
});

function eventOnCurrentElement(selector, event, callback) {
  document.querySelector(selector).addEventListener(event, e => {
    if (e.currentTarget === e.target) {
      callback(e)
    }
  });
}

<p>Click beside the button:</p>
<div class="container">
  <button>Click me</button>
</div>

e.currentTarget始终是指事件处理程序已附加到的元素，而e.target则是标识事件发生的元素。

Answer 2

您可以像这样检查目标对象是容器还是后代：

var container = document.querySelector('.container');
container.addEventListener('click', e => {
  if (e.target !== container)
    return;
  console.log('click div');
});

https://codepen.io/anon/pen/dqaNdR

Answer 3

检查目标是否等于currentTarget

document.querySelector('.container').addEventListener('click', e => {
    if(e.target !== e.currentTarget)
        return false;
    console.log('div');
    //Your code
});

<div class="container" >
    <button>Click me</button>
</div>

如果您使用的是jQuery；

$(document).on('click', '.container', function(event){
    if(event.target !== this)
        return false;
    console.log('div');
    //Your code
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
    <button>Click me</button>
</div>

Answer 4

您必须按照以下代码检查事件target和currentTarget：

<div class="container">
  <button>Click me</button>
</div>

container.addEventListener('click', (e) => {
    if (event.target === e.currentTarget) {
      // any code
      console.log('click div');
    }
});

Answer 5

将此添加到您的代码中：

document.querySelector('button').addEventListener('click', e => {

    e.stopPropagation();
});

您的问题是由于eventPropagation造成的，button click事件冒泡到div click事件中。

在此处检查eventPropagation。

如何检测事件是在元素本身上触发的？

5 个答案: