javascript - Android 4 Chrome 在 CSS 转换后点击触摸事件的测试问题

Question

我在结合使用 CSS 转换和触摸事件 HitTest 时遇到问题。这仅在 Android 4(稳定版和测试版)上的 Chrome 中为我重现。 iOS Safari 以及带有触摸模拟的 Chrome 桌面似乎都运行良好。

我几乎可以肯定这一定是一个错误，所以我想我主要是在这里寻找解决方法。

问题是触摸的 HitTest 似乎只适用于元素在变换之前的位置，而不适用于最终位置。您可以在我的 jsfiddle 上看到一个示例(仅适用于 Android 4 Chrome):

jsfiddle:http://jsfiddle.net/LfaQq/全屏:http://jsfiddle.net/LfaQq/embedded/result/

如果您将蓝色框拖到屏幕的一半位置然后松开，它会弹回到顶部。现在，如果您尝试再次从页面的上半部分拖动，则不会记录任何触摸。触摸事件甚至不会在元素上触发。但是，如果您尝试触摸元素的底部，它会正常工作。然后，您可以尝试将其从底部向上移动，并观察 HitTest 不再适用于底部，但适用于顶部。

这就是我处理事件的方式:

function handleTouch(e) {

    console.log("handle touch")

    e.preventDefault();

    switch(e.type){
        case 'touchstart':
            console.log("touchstart");
            touchOriginY = e.targetTouches[0].screenY;
            break;
        case 'touchmove':
            console.log("touchmove");
            el.innerHTML = e.targetTouches[0].screenY;
            var p = e.targetTouches[0].screenY - touchOriginY;
            el.style[TRANSFORM] = 'translate3d(0,' + p + 'px' + ',0)';
            break;
        case 'touchcancel':
            console.log("touchcancel");
            // Fall through to touchend
        case 'touchend':
            //console.log("touchend");
            //el.style[TRANSITION] = '.4s ease-out';
            el.style[TRANSFORM] = 'translate3d(0,0,0)';
            break;
    }

}

el.addEventListener('touchstart', handleTouch);
el.addEventListener('touchend', handleTouch);
el.addEventListener('touchmove', handleTouch);
el.addEventListener(TRANSITION_END, function(e) {
    console.log("transition end")
    el.style[TRANSITION] = '';
});

我对 touchmove 中的转换没有任何问题，因为无论如何这些都不是要检测的新触摸。

有什么建议吗？

Answer 1

这是 Chrome 中的一个异常错误。

本质上，元素的命中目标是在浏览器布局传递期间记录的。每次设置 innerHTML 时，浏览器都会重新布局，最后一次这样做是在触发 touchend 事件之前。有几种解决方法:

选项 1:您可以在 body 元素上设置触摸处理程序并检查触摸事件的目标以查看它是否正在触摸红色 block 。向 Paul Lewis 推荐这种方法。

http://jsfiddle.net/FtfR8/5/

var el = document.body;
var redblock = $('.splash-section');

function handleTouch(e) {

    console.log("handle touch")
    if(e.target != redblock) {
        return;
    }

    ....

选项 2:在文档上设置一个空的触摸回调似乎也解决了这个问题 - 根据一些链接的错误报告，这导致 HitTest 在主线程上完成，这会影响性能但是它会正确计算命中目标。

http://jsfiddle.net/LfaQq/2/

document.body.addEventListener('touchstart', function(){});

选项 3:在转换结束后设置 innerHTML 以强制重新布局:

el.addEventListener(TRANSITION_END, function(e) {
    console.log("trans end - offsettop:" + el.offsetTop);
    el.style[TRANSITION] = '';
    el.innerHTML = 'Relayout like a boss!';
});

我在这里创建了一个错误报告，Rick Byers 已经链接到一个包含附加信息的相关错误:https://code.google.com/p/chromium/issues/detail?id=253456&thanks=253456&ts=1372075599