5

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

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

问题是触摸的命中测试似乎只适用于元素在变换之前的位置，而不是最终位置。您可以在我的 jsfiddle 上看到一个示例（仅在 Android 4 Chrome 上）：

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

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

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

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 中的转换没有任何问题，因为无论如何这些都不是要检测的新触摸。

有什么建议么？

4

1 回答 1

9

这是 Chrome 中一个不寻常的错误。

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

选项 1：您可以在 body 元素上设置触摸处理程序并检查触摸事件的目标以查看它是否正在触摸红色块。对于这种方法，向保罗刘易斯致敬。

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：在文档上设置一个空的触摸回调似乎也可以解决问题 - 根据一些链接的错误报告，这会导致在主线程上进行命中测试，这对性能造成了影响，但它可以正确计算命中的目标。

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

于 2013-06-26T08:33:25.280 回答