将事件绑定到 div 但“不是”内部 div [重复]

Question

我有一组看起来像这样的 div

<div class="videoThumbnail" data-videoid="4">
   <div class="video"><img src="some/Url" alt="video thumbnail preview"/></div>
   <div class="title">I'm a video</div>
   <div class="download"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></div>
</div>

然后我将一个事件绑定到videoThumbnail 类。该功能运行良好，但我现在需要为单击download 绑定另一个事件。我的两个绑定事件如下所示。

//Bind selecting a thumbnail to change the video
$( '.videoThumbnail' ).not( '.download' ).on( 'click', function ( t ) {
    alert('you are doing thumbnail stuff');
} );
//Bind download on the litle download icon
$( '.download' ).on( 'click', function ( t ) {
    alert('you want to download this');
} );

我希望videoThumbnail 上的第一个绑定事件仅在未选择其中的download 时发生。不幸的是，每当我按下download 图标时，这两个功能都会执行。如何将第一个事件绑定到 videoThumbnail 而不将其绑定到其中的 download？

Answer 1

你需要使用event.stopPropagation

代码

$('.download').on('click', function(event){
   event.stopPropagation();
   // the click code..
});

Answer 2

停止传播将防止事件冒泡，从而防止任何父事件侦听器收到已调度事件的通知。这可能有无意的副作用，导致其他意外事件被抑制。

更好的方法是检查event.target 是.download 元素还是.download 的后代元素。

$('.videoThumbnail').on('click', function(event) {
  if (!$(event.target).closest('.download').length) {
    // clicked on ".videoThumbnail" and "event.target" is not ".download"
  }
});

下面是一个例子说明：

$('.videoThumbnail').on('click', function(event) {
  if (!$(event.target).closest('.download').length) {
    alert('clicked on ".videoThumbnail" and "event.target" is not ".download"');
  }
});


$('.download').on('click', function(event) {
  alert('clicked on the ".download" element');
});

.videoThumbnail { border: 1px solid; }
.download { background: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="videoThumbnail" data-videoid="4">
  <div class="video">
    <img src="some/Url" alt="video thumbnail preview" />
  </div>
  <div class="download"><span class="ui-icon ui-icon-arrowthickstop-1-s">download</span>
  </div>
</div>