javascript - 无法与转换中的 html 元素交互

Question

这件事快把我逼疯了!

我在 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% 起作用。

Answer 1

我在使用 css3 Transform 制作动画时遇到了类似的问题。 使用 css transform 的 Intsead 使用 css positions to 并给 transition to animate

jsfiddle.net

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