浏览器有时会忽略了CSS3中一个jQuery单击事件变换(Browser sometimes ign

当一个元素包含正在通过CSS动画的另一个元素transition ，单击事件偶尔不解雇。

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

我有一个布局，其中的一系列图像具有被透露悬停字幕。 在用户点击他们把火关.slideDown相邻元素。 他们自己也很可能是快速由用户通过点击。 问题是更明显的上线的站点比codepen。

在codepen，我点击的约90％被服从，而当CSS过渡是残疾人，100％服从。

任何建议都欢迎。

我要指出，这个问题是最容易在Chrome浏览器中复制，它是在Safari中不太常见，并在Firefox显著较少见。

Answer 1:

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

p {
  pointer-events: none;
}

问题就出现了，因为点击来自鼠标按下+一个鼠标松开产生的，如果你在过渡的边缘做鼠标按下是一个元素，而在另一个鼠标松开（并且不产生点击）。

各地（不是真的一样，但最有可能的用户不会注意到它）的另一种方式是这样做的鼠标按下，而不是点击

文章来源: Browser sometimes ignores a jQuery click event during a CSS3 transform