Question

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

将css3 -webkit-transform样式与任何类型的3d旋转（例如rotateY(30deg)）一起使用时，将click事件绑定到此旋转对象是非常不可靠的。

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

HTML：

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

的CSS：

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

jquery的：

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

我的意思是'不可靠'是不会总是抛出click事件（取决于你点击它的位置），有时事件根本不会被抛出（无论你在哪里点击它）。

有没有办法修复或避免这种情况，以便在旋转和动画时使用CSS3元素？

更新

在元素上使用CSS属性'float：left'似乎允许它正确地检测点击事件 *而不是在运动中。有谁知道为什么浮动属性修复了这个？

我的最终目标是让对象在运动中接收点击事件，但是，当我应用新的CSS3 rotate3d属性（实时，在另一个jquery事件上）来给对象动画时，click事件再次开始失败。 / p>

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);
});

这是动画的更新小提琴，似乎工作正常：http://jsfiddle.net/RyvtZ/9/

（我在console.log添加hover以简化生活;））

CSS3在动画元素上旋转，导致不调用click事件

1 个答案: