关于CSS转换后触摸事件的Android 4 Chrome测试问题

Question

我遇到了CSS转换和触摸事件命中测试组合的问题.这仅适用于Android 4中的Chrome版本(稳定版和测试版).iOS Safari以及带触摸仿真的Chrome桌面似乎都运行良好.

我几乎肯定这是一个bug,所以我认为我主要是在寻找解决方法.

问题是触摸的命中测试似乎适用于元素在变换之前的位置,而不是最终位置.您可以在我的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中的变换没有任何问题,因为这些都不是要检测的新触摸.

有什么建议？

Answer 1

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

基本上,元素的命中目标是在浏览器的布局过程中记录的.每次设置innerHTML时,浏览器都将重新布局,最后一次完成,就是在触发touchend事件之前.它有几种方法:

选项1:您可以在body元素上设置触摸处理程序并检查触摸事件的目标,以查看它是否正在触摸红色块.对于这种方法,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:设置文件空触摸回调似乎解决的问题,以及 - 根据一些链接错误报告,这将导致命中测试要在主线程这是对性能的砸在做,但它正确地计算命中目标.

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!';
});

我已经在这里创造一个bug报告和里克·拜尔斯已链接到与其他信息相关的bug:https://code.google.com/p/chromium/issues/detail?id=253456&thanks=253456&ts=1372075599