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

Question

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

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

我有一个布局，其中一系列图像具有在悬停时显示的标题。单击时，它们会触发.slideDown相邻元素的 a。它们本身很可能被用户快速点击。这个问题在实时站点上比在 codepen 中更明显。

在 codepen 中，大约 90% 的点击都被遵守，而当 CSS 转换被禁用时，100% 被遵守。

欢迎任何建议。

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

Answer 1

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

p {
  pointer-events: none;
}

出现问题是因为单击是从 mousedown + mouseup 生成的，如果您在过渡的边缘执行此操作，则 mousedown 位于一个元素中，而 mouseup 位于另一个元素中（并且不会生成单击）。

另一种方式（不是完全一样，但很可能用户不会注意到它）是在 mousedown 而不是 click