jquery - CSS3 在动画元素上旋转导致点击事件不调用

Question

好吧，这个给我带来了很多问题。

当使用 css3 -webkit-transform 样式和任何类型的 3d 旋转(例如 rotateY(30deg))时，绑定(bind)点击事件是非常不可靠的到这个旋转的对象。

请参阅下面的示例代码或查看 this fiddle (要查看 fiddle 中的不可靠性，请单击元素的右侧)。此示例没有动画但仍然受到影响。

html:

<div id='box1'>Click this box.</div>

CSS:

#box1{
    -webkit-transform: rotateY(30deg);
}

j查询:

$('#box1').click(function(){
    alert('clicked box 1');
});

我所说的“不可靠”是指点击事件并不总是被抛出(取决于你点击它的位置)，有时甚至根本不抛出该事件(无论你点击它的位置)。

有没有办法解决或避免这种情况，以便它在旋转和动画时与 CSS3 元素一起工作？

更新:

在元素上使用 CSS 属性“float:left”似乎可以让它*在不运动时正确检测点击事件。有谁知道为什么 float 属性可以解决这个问题？

我的最终目标是让对象在运动时接收点击事件，但是，当我应用新的 CSS3 rotate3d 属性(实时，在另一个 jquery 事件上)为对象提供动画时，点击事件再次开始失败。

Answer 1

我似乎无法重现该问题，它似乎在添加 float:left; 后正常工作。

有时浏览器在呈现 HTML 元素的实际宽度时表现得很滑稽。 float:left 似乎让浏览器计算得更好。

这是 JavaScript :

$(document).ready(function (){
  $('#box1').bind({
    'click' : function () {
      alert('clicked box 1');
    },
    'hover' : function () {
      console.log('Over Box 1');
    }
  });
  $('#box2').click(function(){
    alert('clicked box 2');
  });

  window.angle = 0;
  setInterval(function () {
    if (window.angle >= 360) {
      window.angle = 0;
    } else {
      window.angle += 5;
    }
    $('#box1').css('-webkit-transform', 'rotateY(' + window.angle + 'deg)');
    }, 100);
});

这是一个更新的动画 fiddle ，它似乎工作正常:http://jsfiddle.net/RyvtZ/9/

(我在 hover 上添加了 console.log 以使生活更简单；))