CSS3在动画元素上旋转，导致点击事件不调用 [英] CSS3 Rotate on animated element causing click event not to invoke

问题描述

样式与任何种类的3d旋转（例如 rotateY（30deg）），将点击事件绑定到此旋转对象是非常不可靠的。

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

html：

 < div id ='box1'>点击此框。< / div> 
  

css：

 code>＃box1 {
 -webkit-transform：rotateY（30deg）; 
} 
  

jquery：

  $（'＃box1'）click（function（）{
 alert（'clicked box 1'）; 
}）; 
  

不可靠的意思是，点击事件不总是抛出点击它），有时事件不会被抛出（无论你在哪里点击它）。

有没有办法修复或避免这样，所以它适用于CSS3元素旋转和动画？

更新：

在元素上使用CSS属性float：left，似乎可以正确检测点击事件 * while不在运动。有人知道为什么float属性修复这个？

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

解决方案

我似乎无法复制问题，似乎工作正常后添加 float：left; 。

有时浏览器在渲染HTML元素的实际宽度时很滑稽。 float：left 似乎使浏览器的计算更好。

这是JavaScript：

  $（document）.ready（function（）{
 $（'＃box1'）。bind（{
'click '：function（）{
 alert（'clicked box 1'）; 
}，
'hover'：function（）{
 console.log ）; 
} 
}）; 
 $（'＃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 以使生活更简单;））

Okay this one is causing me a lot of problems.

When using the css3 -webkit-transform style with any kind of 3d rotation (such as rotateY(30deg)), it is extremely unreliable to bind a click event to this rotated object.

See the example code below or look at this fiddle (to see the unreliability in fiddle, click on the right side of the element). This example does not have animation but still is affected.

html:

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

css:

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

jquery:

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

What I mean by 'unreliable' is that the click event is not always thrown (depending on where you click it), and sometimes the event is not thrown at all (no matter where you click it).

Is there a way to fix or avoid this so it works with CSS3 elements while rotated and animated?

Update:

Using the CSS property 'float:left' on the element seems to allow it to detect click events properly *while not in motion. Does anyone know why the float property fixes this?

My ultimate goal is to have the object receive click events while in motion, however, when I apply a new CSS3 rotate3d property (live, upon another jquery event) to give the object animation, the click event starts failing again.

解决方案

I cannot seem to replicate the problem, it seems to be working correctly after adding a float:left;.

Sometimes browsers act funny while rendering the actual width of an HTML element. float:left seems to make the browsers calculate better.

This is the 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);
});

Here is an updated fiddle with the animation, it seems to work fine : http://jsfiddle.net/RyvtZ/9/

(I added console.log on hover to make life simpler ;) )

这篇关于CSS3在动画元素上旋转，导致点击事件不调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！