在 div 中的任何元素上捕捉点击事件

Question

我有一个 div，其中包含一堆元素。如果屏幕尺寸小于 767 像素，此 div 将被隐藏（动画 fadeOut()）。但是，如果用户单击此 div 中的任何元素，我想停止 fadeOut().

但是按照我现在的看法，我必须为这个 div 中的每个元素添加一个点击事件。有没有更优雅的方法来捕获 div 中的所有点击事件？

Answer 1

你可以这样做：

$('#container').on('click', function (event) {
  if (event.target != this) {
    alert('You clicked a descendent of #container.');
  } else {
    alert('You actually clicked #container itself.');
  }
});

这会检查启动点击事件的元素是否与其附加的元素完全相同。

Answer 2

这只是 Bill Chriswell 的回答的扩展，其中侦听容器的子项的点击事件。要停止动画，您可能需要使用 .stop() 方法。

$('#container').children().on('click', function (e) {
  
     //apply jQuery's stop() method here 
     alert("children");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
    container
    <span>span 1</span><span> span 2</span>
</div>

在 div 中的任何元素上捕捉点击事件

Catch click event on any element inside a div

jquery

onclick