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

Posted 2023-05-08

【中文标题】CSS3在动画元素上旋转导致点击事件不调用

【英文标题】：CSS3 Rotate on animated element causing click event not to invoke

【发布时间】：2012-11-29 18:31:06

【问题描述】：

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

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

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

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' 似乎可以让它正确检测点击事件*不在运动中。有谁知道为什么 float 属性可以解决这个问题？

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

【问题讨论】：

添加 float:left; 使其工作：jsfiddle.net/RyvtZ/4

感谢@PranavKapoor 的建议，这很有趣，你是怎么想到这个的？我仍然在过渡过程中遇到旋转对象的问题，所以这不是一个完整的解决方案

@JustinGingyMcDonald，如果您仍然有问题，请提供一个新的 jsFiddle，其中包含 您使用的动画类型，因为 OP 的动画在 Chrome 中对我来说可以正常工作。

@PranavKapoor，我也想知道您是如何得出这个解决方案的，但更重要的是，如果无法使用 float 属性，那么还有哪些其他属性可以使用？恕我直言，我很难找到解决这个有趣问题的方法。

解决此问题的另一种方法是将元素包装在一个容器中，并检测容器上的点击而不是旋转元素。

【参考方案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/

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

【讨论】：

谢谢@PranavKapoor，抱歉我的问题很模糊。如果我仍然找不到解决方案，我会在一段时间内更新它。我需要使用带有 X = 一些延迟的 css3 -webkit-transition: -webkit-transform Xs linear。这样 3d 旋转动画将是平滑的。这就是我发现问题的地方。

+1 优秀的解决方案！我想问一下display:inline-block;那么由于使用float:left或float:right的用法是不是必需的？