javascript - 如何仅在 JavaScript/jQuery 中没有默认值时才执行操作？

Question

我被要求点击 div 中的任何地方执行特定操作(比如折叠它)除非点击是在链接、按钮等上...

基本上，我想要 event.preventDefault() 的逆过程。

有没有好的简单方法来做到这一点？

我在这里寻找通用解决方案；我不想对 div 的内容做太多假设。

可能看起来像:

<div id="click_me>
<p>Clicking here should do stuff
   <a href="http://stackoverflow.com">but not here, nor on the following image</a>
   <a href="/xyz"><img url="/icon.png"/></a>
   imagine buttons... input areas, ...
</p>
</div>

使用以下 JavaScript:

$("#click_me").click(function(){
  if(black_magic) {
    $("#click_me").toggleClass("collapsed");
  }
});

Answer 1

您只需确保事件 target 不是链接或按钮即可。

$('#click_me').click(function(e) {
  interactive = 'a, button, input, textarea, video, map, object';
  if($(event.target).closest(interactive).length == 0) ) {
    $("#click_me").toggleClass("collapsed");
  }
});