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

Question

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

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

我有一个布局,其中一系列图像具有在悬停时显示的标题.点击它们会触发.slideDown相邻元素.他们自己可能会被用户快速点击.这个问题在实时网站上比在codepen中更加引人注目.

在codepen中,大约90%的点击都被遵守,而当CSS过渡被禁用时,100%被遵守.

欢迎任何建议.

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

Answer 1

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

p {
  pointer-events: none;
}

出现这个问题是因为点击是从mousedown + mouseup生成的,如果你在转换的边缘进行,则mousedown在一个元素中,mouseup在另一个元素中(并且不会生成点击).

反过来(不是真的相同,但很可能是用户不会注意到它)是在mousedown而不是click