Question

我的图片右上角有一个垃圾桶的叠加层。我有两个点击事件，一个是当用户点击垃圾'i.removeEvent'时，另一个是当用户点击图像'div.spaceEvent'时，他们在点击时都会做不同的事情。但是，当用户点击垃圾箱时，它还会触发图像上的点击事件。如何在点击垃圾箱时停止触发图像点击？

这是我的代码。

$("div.spaceEvent").off('click').on('click', function() {
  scope.eventId = $(this).data('event-id');
  //$("#registeredMemberContainer").html('');
  scope.GetRegisteredMembersAsHost();
});


$("i.removeEvent").off('click').on('click', function() {
  scope.eventId = $(this).data('event-id');
  scope.spaceId = $(this).data('space-id');

  var model = {};
  model.eventId = scope.eventId;
  model.spaceId = scope.spaceId;
  // do other stuff here
});

<ul class="thumbnails" style="padding-left: 0px;">
  @{ var listItems = count > 3 ? 3 : count; } @for (int j = 0; j
  < listItems; j++) { var spaceEvent=M odel.YogaSpaceEvents.ElementAt(incrament++); <li class="col-sm-4" style="padding-left: 5px; padding-right: 5px;">
    <div class="spaceEvent" data-event-id=@spaceEvent.YogaSpaceEventId>
      <div class="thumbnail">

        <div>
          <img class="img-responsive" style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(spaceEvent.SpaceThumbnail43)))" alt="space image">
          <i style="z-index: 200; position: absolute; top: 8px; right: 15px; color: whitesmoke;" class="fa fa-trash-o fa-2x removeEvent" data-event-id=@spaceEvent.YogaSpaceEventId data-space-id=@spaceEvent.YogaSpaceRefId data-container="body" data-toggle="popover"
            data-trigger="hover" data-placement="top" data-content="Cancel event"></i>
        </div>

        <div class="caption" style="padding-top: 0px; padding-bottom: 0px;">
          <h4 style="margin-top: 5px; margin-bottom: 5px;">@spaceEvent.Title</h4>
          <p style="margin-bottom: 0px;"><span>@spaceEvent.EventDateTime.ToShortTimeString()</span><span> &middot; </span><span>@YogaBandy2017.Models.General.EnumHelper.GetDisplayName(spaceEvent.Duration)</span></p>
          <p style="margin-bottom: 0px;">@spaceEvent.StyleMain.ToString()</p>
          <p class="teacher-container" style="margin-bottom: 0px;">Teacher: @(spaceEvent.IsTeacherRegistered ? spaceEvent.RegisteredTeacherName : "none")</p>
          <p><span class="registered-container">Registered</span>: <span class="badge">@spaceEvent.RegisteredStudentCount/@spaceEvent.MaxSize</span></p>
        </div>
      </div>
    </div>
    </li>
    count -= 1; }
</ul>

Answer 1

您应该首先在点击处理程序中调用stopPropagation。

$("i.removeEvent").off('click').on('click', function(event) {
  event.stopPropagation();
  // do other stuff here
});

Answer 2

此行为是预期和预期的结果。它被称为事件传播或冒泡。

您可以通过调用eventhandler中的event.stopPropagation()来避免这种情况：

$("i.removeEvent").off('click').on('click', function(evt) {
  evt.stopPropagation(); // this avoids the event bubbeling / propagation
  scope.eventId = $(this).data('event-id');
  scope.spaceId = $(this).data('space-id');

  var model = {};
  model.eventId = scope.eventId;
  model.spaceId = scope.spaceId;
  // do other stuff here
});

除了评论： event.stopPropagtion（）和event.stopImmediatePropagation（）有什么区别？

不同之处如下：

<body>
  <div>Some div Content
    <i>Close</i>
  </div>
</body>
<script>
$('div').on('click', function() {
  console.log('div was clicked!');
});
$('i').on('click', function(evt) {
  console.log('i was clicked! This message is from the first event handler!');

  // one case
  evt.stopPropagation();
  /* Message in console:
i was clicked! This message is from the first event handler!
i was clicked! This message is from the second event handler!
  */
  // other case:
  evt.stopImmediatePropagation();
  /* Message in console:
i was clicked! This message is from the first event handler!
  */

  // "div was clicked!" will never read when i is clicked. It's only displayed if the div is clicked directly.
});
$('i').on('click', function() {
  console.log('i was clicked! This message is from the second event handler!');
});
</script>

单击overlay元素会触发底层元素的单击

2 个答案: