Question

我发现Chrome与鼠标输入事件结合时会完全忽略点击事件。我很好奇这是Chrome或jQuery中的已知错误吗？

下面的jsfiddle显示了这个例子。如果您将鼠标拖到显示＆＃39; hover-add＆＃39;的项目正上方或下方的单元格中。类，然后点击＆＃39; .cell-item＆＃39;，点击事件未注册。但是，如果您从单元格的左侧或右侧进入，则单击事件已注册。

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？）似乎变得混乱。添加悬停项后，我会看到其他奇怪的行为;多个'mouseenter'事件在悬停项目时触发，而'click'奇怪地触发'mouseenter'。也许可以通过绑定.cell-item上的点击项来解决，但我没有探索，因为上面的一点CSS修复了它。

希望这有帮助！

删除子元素时，Chrome不会侦听单击处理程序

1 个答案: