浏览器在CSS3转换过程中有时会忽略jQuery点击事件

当元素包含另一个通过CSS transition进行动画处理的元素时，点击事件偶尔不会被触发。浏览器在CSS3转换过程中有时会忽略jQuery点击事件

我有一个布局，其中的一系列图像具有被透露悬停字幕。点击它们就会触发相邻元素的.slideDown。他们自己很可能会被用户快速点击。问题在现场上比在代码簿中更明显。

在codepen中，我的点击约有90％被服从，而当CSS转换被禁用时，服从100％。

欢迎任何建议。

我应该注意到这个问题在Chrome中最容易复制，在Safari中不太常见，在Firefox中也不太常见。

我认为，关键是禁用鼠标事件在p元素：

p { 
    pointer-events: none; 
}

问题就出现了，因为点击来自鼠标按下+一个鼠标松开产生的，如果你这样做在的边缘将mousedown转换为一个元素，并将mouseup转换为另一个元素（并且不会生成点击）。

周围的其他方式（不是真的一样，但最有可能的用户不会注意到它）在鼠标按下，而不是点击

2013-04-03 12:20:33 vals

一个可行的治疗做。谢谢，我甚至没有意识到这个CSS属性。我唯一的问题是它根本不支持IE：https：//developer.mozilla.org/en/docs/CSS/pointer-events 您是否知道有哪些方法可以得到更广泛的支持？ –

@Magnakai我最感兴趣的是，如果我真的很快点击链接，那么prevent-default调用就会失败，并且链接被执行（URL被加载）。我不知道为什么会发生这种情况。 –

问题出现是因为点击是从mousedown + mouseup生成的，并且如果您在转换的边缘执行该操作，则mousedown位于一个元素中，而mouseup位于另一个元素中（并且不会生成点击）。反过来（不是真的一样，但最有可能的用户不会注意到它）是在mousedown而不是点击 – vals

回答