Question

这是我的职能：

document.querySelector('body').addEventListener('click',e=>{getRandomImagePair()});

当我单击身体上的任何地方时，都会发生某些事情。我有两个div和.more，如果我单击它们，则会执行功能.wd。我该如何做才能使我单击链接而不会触发该功能？

我在下面尝试过此方法，它可以工作，但随后getRandomImagePair() div不会触发另一个所需的其他函数。

.more

Answer 1

使用event delegation，只需检查className元素的event.target。在事件处理程序回调中使用if语句，以防止调用getRandomImagePair时单击链接：

function getRandomImagePair() {
  console.log('getRandomImagePair called');
}

//using event delegation
document.querySelector('body').addEventListener('click', e => {
  if (e.target.className !== 'wd' && e.target.className !== 'more') {
    getRandomImagePair();
  }
});

.wd,
.more {
  color: blue;
  text-decoration: underline;
}

<body>
  <div class="more">.more</div>
  <div class="wd">.wd</div>

  <p>Here is some other stuff</p>
  <p>that when clicked on should still fire event handler</p>
</body>

Answer 2

尝试排除您不想受到点击影响的项目：

const getRandomImagePair = () => {
	alert("clicked")
}

$('body :not(".more, .wd")').on('click', getRandomImagePair);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Yep</button>
<button class="more">Nope</button>
<button class="wd">Nope</button>
<button>Yep</button>

点击正文但不是两个div

2 个答案: