Question

我有一个包含大量元素的div。如果屏幕尺寸小于767px，则会隐藏此div（动画fadeOut()）。但是，如果用户点击此div中的任何元素，我想停止fadeOut()。

但正如我现在看到的那样，我必须为此div中的每个元素添加一个click事件。是不是有更优雅的方式来捕捉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

这只是比尔克里斯威尔答案的延伸，其中容器的孩子们听取了点击事件。要停止动画，您可能需要使用.stop()方法。

＆＃13;

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

＆＃13;

<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>

＆＃13;

捕获div内任何元素的click事件

2 个答案: