8

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

当使用-webkit-transform带有任何类型的 3d 旋转（例如rotateY(30deg)）的 css3 样式时，将点击事件绑定到这个旋转的对象是极其不可靠的。

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

html:

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

CSS：

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

jQuery：

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

我所说的“不可靠”是指点击事件并不总是被抛出（取决于你点击它的位置），有时事件根本不会被抛出（无论你在哪里点击它）。

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

更新：

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

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

4

1 回答 1

2

我似乎无法复制该问题，添加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让生活更简单;））

于 2012-12-12T05:39:35.163 回答