将事件绑定到 div 但'not'内部 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>