子要素が削除されたときにChromeがクリックハンドラをリッスンしない

Question

マウス入力イベントと組み合わせてChromeがクリックイベントを完全に無視するシナリオを見つけました。これがChromeまたはjQueryの既知のバグであるかどうか不思議です。

以下の例は、この例を示しています。 'hover-add'クラスを表示しているアイテムの真上または真下のセルにマウスをドラッグし、 '.cell-item'をクリックすると、クリックイベントはに登録されていません。ただし、セルの左側または右側からクリックすると、クリックイベントはに登録されます。

https://jsfiddle.net/smoq36yp/

<div class='container'> 
    <div class='col' data-col='0'> 
    <div class='cell' data-row='2' data-col='0'></div> 
    <div class='cell hover-add' data-row='1' data-col='0'> 
     <div class='cell-item'></div> 
    </div> 
    <div class='cell filled' data-row='0' data-col='0'> 
     <div class='cell-item'></div> 
    </div> 
    </div> 
</div> 

# if you move the mouse in from above or below to the cell in row 1, 
# this click event (or others put on the body, etc.) does not fire 
$('.cell:not(.filled)').click (event) -> 
    mgr.addItem(event) 
$('.cell:not(.filled)').mouseenter (event) -> 
    mgr.hoverInAddItem(event) 

Answer 1

私はJSFiddleリンクで問題を再現することができました。

.cell-item {pointer-events: none;}を追加すると、目的の動作が表示されます。

.cell-itemが.cellに追加されると、Chromeのイベントハンドラ（および/またはjQuery？）が混乱しているようです。ホバーアイテムが追加されると、他の奇妙な動作が見られます。複数の「マウスセンター」イベントがマウスオーバーしている間にトリガーし、「クリック」が「マウスセンター」を奇妙にトリガーします。別の方法として、.cell-itemのクリックアイテムをバインドすることで解決できるかもしれませんが、上記の少しのCSSがそれを修正して以来、私はそれを探っていませんでした。

希望すると便利です。