浏览器有时会在CSS3转换期间忽略jQuery单击事件

当元素包含通过CSS transition动画的另一个元素时，偶尔不会触发单击事件。

测试用例： http ： //codepen.io/anon/pen/gbosy

我有一个布局，其中一系列图像具有在hover时显示的标题。 点击它们会触发相邻元素的.slideDown 。 他们自己可能会被用户快速点击。 现场网站上的问题比在codepen中更明显。

在codepen中，大约90％的点击都被遵守，而当CSS过渡被禁用时，100％被遵守。

欢迎任何建议。

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

Answer 1

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

 p { pointer-events: none; } 

问题出现是因为点击是从mousedown + mouseup生成的，如果你在转换的边缘做到了，mousedown在一个元素中，mouseup在另一个元素中（并且不会产生点击）。

反过来（不是真的相同，但很可能用户不会注意到它）是在mousedown而不是点击它