點擊疊加元素觸發點擊疊加元素

我有一個圖像，在右上角有一個垃圾桶疊加圖。我有兩個點擊事件，一個是用戶點擊垃圾「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

點擊疊加元素觸發點擊疊加元素

回答

相關問題