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);

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

如果球体到达屏幕底部，即转换结束，则点击事件将100％运行。

Answer 1

使用css3 Transform进行动画制作时遇到了类似的问题。而不是使用css变换使用css位置并转换为动画

jsfiddle.net

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

无法与转换的html元素进行交互

1 个答案: