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>

将事件绑定到div但是“不是”内部div

2 个答案: