点击叠加元素触发点击叠加元素

我有一个图像，在右上角有一个垃圾桶叠加图。我有两个点击事件，一个是用户点击垃圾“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" [email protected]> 
 
     <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" [email protected] [email protected] 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>

来源

2017-09-25 user1186050

您应该单击处理程序被调用stopPropagation第一件事。

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

来源

2017-09-25 21:37:21 mikkelrd

此行为是希望和预期的结果。它被称为事件传播或bubbeling。

可以通过调用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>

来源

2017-09-25 21:37:32

什么stoppropagation和stopimmediatepropagation之间的区别？ – user1186050

如果您已经为事件添加了多个事件处理程序，它们将全部使用event.stopPropagation（）执行，但使用event.stopImmediatePropagation（）会在实际事件处理程序后停止处理。（我会添加一个例子，给我一秒钟） –

没关系，我明白了！ – user1186050

点击叠加元素触发点击叠加元素

回答

相关问题