5

这件事快把我逼疯了！

我在 html 页面的另一个 div 中以编程方式创建绝对定位的 div。外部 div 为事件注册，mousedown内部touchstartdiv 使用 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% 起作用。

4

1 回答 1

1

我在使用 css3 Transform 制作动画时遇到了类似的问题。使用 css 转换的 Intsead 使用 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";
于 2013-11-18T07:46:11.300 回答