单击覆盖元素会触发单击底层元素
[英]clicking on overlay element triggers click of underlay element
问题描述
I have an image with an overlay of a trash can in the top right corner. 
我在右上角有一个带有垃圾桶覆盖物的图像。 I have two click events, one when the user clicks the trash 'i.removeEvent' and the second when the user clicks the image 'div.spaceEvent', they both do different things when clicked. 我有两个单击事件，一个事件是用户单击垃圾箱“ i.removeEvent”，第二个事件是用户单击图像“ div.spaceEvent”，当单击它们时，它们都会做不同的事情。 But when the user clicks the trash it also triggers a click event on the image. 但是，当用户单击垃圾桶时，它还会触发图像上的点击事件。 How can I stop the triggering of the image click when the trash is clicked? 单击垃圾桶时，如何停止触发图像单击？
Here is my code. 这是我的代码。
$("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> · </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>
2 个解决方案
解决方案1
1 2017-09-25 21:37:21
You should be invoking stopPropagation first thing in the click handler. 您应该在点击处理程序中首先调用stopPropagation 。
$("i.removeEvent").off('click').on('click', function(event) { event.stopPropagation(); // do other stuff here });
解决方案2
1 2017-09-25 21:37:32
This behavior is the wanted and expected result. 此行为是所需和预期的结果。 It's called event propagation or bubbeling. 这称为事件传播或冒泡。
You can avoid this by calling event.stopPropagation() inside the 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
});
In addition of the comment: What is the difference between event.stopPropagtion() and event.stopImmediatePropagation()? 除了评论： event.stopPropagtion（）和event.stopImmediatePropagation（）有什么区别？
The difference is the following: 区别如下：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.