translateZ 后鼠标向上/单击事件未触发答案

【问题标题】：Mouse up/click event not firing after translateZtranslateZ 后鼠标向上/单击事件未触发
【发布时间】：2012-07-30 15:19:38
【问题描述】：

我有一个a 标记，它链接到另一个页面。当用户点击这个链接时，我有一个mouseDown 事件触发，它会向元素应用一点translateZ。

奇怪的是，在translateZ 之后，鼠标向上或单击事件（依赖于 mouseup）并没有触发。

在 Firefox 中似乎可以正常工作，但在 chrome 中却不行。

这是一个显示我的问题的小 jsfiddle：http://jsfiddle.net/8LMzb/9/

【问题讨论】：

stackoverflow.com/questions/15786891/… 帮助了我。

标签： javascript html google-chrome css

【解决方案1】：

这似乎是 MouseDown() 事件中 tile.style.webkitTransform = "perspective(800px) translateZ( -30px )"; 的错误。
在translateZ( -30px ) （带有负像素数量的NB 参数） 之后，元素没有响应。如果您尝试translateZ( 30px ) 一切都会正常工作。

http://jsfiddle.net/8LMzb/142/

【讨论】：

【解决方案2】：

由于这在 Firefox 中有效，我不太确定它是 chrome 错误，还是预期的行为.. 也不知道此修复是否会继续有效。我所做的是，在触发 mousedown 事件之前不对变换应用任何透视图，这以某种方式允许触发 mouseup 事件，并且链接可以工作。

相关小提琴：http://jsfiddle.net/8LMzb/152/

【讨论】：

【解决方案3】：

如果您给父对象一个正的 translateZ 大于受影响的子对象，则链接可能会再次开始工作，因为它们可能已被剪切到浏览器平面下方。有时这也会导致整个翻译后的 div 也消失。

【讨论】：

我也是，干得好，还值得指出的是 translateZ 为 0 符合条件，但它可能会引入一个关于文本渲染的额外问题（我的文本稍微变浅了）。不过我不太在乎。