无法与转换的 html 元素交互

Cannot interact with transitioning html elements

本文关键字：html 元素 交互 转换      更新时间：2023-09-26

这东西快把我逼疯了！

我在 html 页面中的另一个div 内以编程方式创建绝对定位的div。外部div 注册mousedown和touchstart事件，内部div 使用 css3 过渡开始移动。

所有转换都会影响 -WebKit-transform 属性。

一切正常，除了事件处理：在 Chrome 和 Safari 中，所有事件都包含在外部div 事件处理程序中，但事件的目标属性很少是我点击的div！

当div 完成其转换时，

事件目标始终是正确的，但在div 转换时则不然。这是一个错误吗？我错过了什么吗？

更新：

以下示例与 Safari 和 Chrome 兼容

下面是演示该问题的联机示例：http://jsfiddle.net/qfn7F/4/

球体从屏幕顶部生成，并朝屏幕底部移动。当用户单击球体（mousedown事件）时，单击的球体必须从屏幕上消失。

以下是处理与球体交互的代码：

container.addEventListener(onSelect, function() {
    if (event.target.classList.contains("transition")) {
        var tDiv = event.target;
        var box = tDiv.getBoundingClientRect();
        var durationEase = "0.25s linear";
        tDiv.style.pointerEvents = "none";
        tDiv.style.webkitTransform = "translate3d(" + box.left + "px," + box.top + "px, 1px)";
        tDiv.style.opacity = 0;
        tDiv.style.webkitTransition = "opacity " + durationEase;
    }
    event.preventDefault();
    event.stopPropagation();
}, false);

但是事件的目标很少是用户单击的球体，因此球体不会以一致的方式从屏幕上消失。

如果球体到达屏幕底部，即过渡结束，则单击事件 100% 有效。

在使用

css3 Transform制作动画时遇到了类似的问题。使用 css 转换的 intsead 使用 css 位置来提供 transtion 以动画

jsfiddle.net

 tDiv.style.top = (tDiv.offsetWidth * 0.5 + Math.random() * (window.innerWidth - tDiv.offsetWidth)) + "px";
 tDiv.style.right = (window.innerHeight - tDiv.offsetHeight) + "px";
相关文章：