Julie Julie - 4 months ago 8
Javascript Question

Chrome not listening to click handler when child element is removed

I have found a scenario where Chrome completely ignores click events when combined with a mouse-enter event. I am curious if this is a known bug in Chrome or jQuery?

The jsfiddle below shows this example. If you drag your mouse into a cell from directly above or below the item that is showing the 'hover-add' class, and click on the '.cell-item', the click event is not registered. However, if you come in from the left or right side of the cell, the click event is registered.

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

I was able to replicate the issue with the JSFiddle link.

When I add .cell-item {pointer-events: none;}, I'm seeing the desired behavior.

Chrome's event handler (and/or jQuery?) seems to be getting confused once the .cell-item is added to the .cell. Am seeing other odd behavior once the hover item is added; multiple 'mouseenter' events triggering while over hover item, and 'click' is oddly triggering 'mouseenter'. May be able to alternatively resolve by binding click items on the .cell-item as well, but I didn't explore that since the little bit of CSS above fixes it for me.

Hope this helps!