无法与转换的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);

但事件的目标是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";