代码之家 › 专栏 › 技术社区 › Federico

单击正文,但不单击两个div

jquery javascript

Federico · 技术社区 · 6 年前

我的职能是:

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

当我点击身体上的任何地方时,就会发生一些事情。我有两个 div S .more 和 .wd 如果我点击它们的功能 getRandomImagePair() 执行。如果我单击链接,该如何使函数不触发?

我在下面试过这个,它起作用,但是 更多 DIV不会触发另一个需要的不同函数。

$('.more, .wd').on('click', function(event) {
  event.stopPropagation();
});

2 回复 | 直到 6 年前

Tom O. 6 年前

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>

Jeremy Thille 6 年前

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>