使用 touchstart 导致屏幕在 touchstart 时变得模糊

Question

我目前正在我的设备（三星 Galaxy S2）上为我的游戏测试 touchstart 功能。我正在使用android中phonegap下的javascript和jquery进行编程，目前遇到如下问题：

• 我的触摸启动事件（例如触发攻击按钮“touchstart”事件来运行一些javascript来执行攻击操作）导致我的屏幕暂时变得模糊，然后在不到一秒的时间内恢复正常，所以更像是屏幕闪烁，图像变得不稳定）。我没有使用 css 转换或过渡，只是简单的 css 和图像。

有人遇到过与我或多或少类似的问题吗？请告诉我。有点不知所措，无论是硬件问题还是触摸启动问题，我都可以解决这个问题。

下面是我的导航控件的 Javascript 示例（左、上、下、右触摸启动点击）：

if ('ontouchstart' in document.documentElement) {
        var left = document.getElementById('left');
        left.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var l_xy = l_oldCell.split('_');
            var l_x = l_xy[0];
            var l_y = l_xy[1];

            if(l_y == 1)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var l_newCell = l_x + '_' + (parseInt(l_y) - 1);

            //  validate if next cell is empty
            if($('#' + l_newCell + ':has(".shadow")').val() != undefined
            || $('#' + l_newCell + ':has(".ally")').val() != undefined
            || $('#' + l_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + l_newCell).append($('#' + controlsPlayerChar));
            $('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove();   

            //  set char direction to 'left' and set next footstep
            setDirection('left');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var up = document.getElementById('up');
        up.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var u_xy = u_oldCell.split('_');
            var u_x = u_xy[0];
            var u_y = u_xy[1];

            if(u_x == 1)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var u_newCell = (parseInt(u_x) - 1) + '_' + u_y;

            //  validate if next cell is empty
            if($('#' + u_newCell + ':has(".shadow")').val() != undefined
            || $('#' + u_newCell + ':has(".ally")').val() != undefined
            || $('#' + u_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + u_newCell).append($('#' + controlsPlayerChar));
            $('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'up' and set next footstep
            setDirection('up');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var down = document.getElementById('down');
        down.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var d_xy = d_oldCell.split('_');
            var d_x = d_xy[0];
            var d_y = d_xy[1];

            if(d_x == rows)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var d_newCell = (parseInt(d_x) + 1) + '_' + d_y;
            //  validate if next cell is empty
            if($('#' + d_newCell + ':has(".shadow")').val() != undefined
            || $('#' + d_newCell + ':has(".ally")').val() != undefined
            || $('#' + d_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + d_newCell).append($('#' + controlsPlayerChar));
            $('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

            //  set char direction to 'down' and set next footstep
            setDirection('down');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var right = document.getElementById('right');
        right.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var r_xy = r_oldCell.split('_');
            var r_x = r_xy[0];
            var r_y = r_xy[1];
            if(r_y == cols)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var r_newCell = r_x + '_' + (parseInt(r_y) + 1);

            //  validate if next cell is empty
            if($('#' + r_newCell + ':has(".shadow")').val() != undefined
            || $('#' + r_newCell + ':has(".ally")').val() != undefined
            || $('#' + r_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + r_newCell).append($('#' + controlsPlayerChar));
            $('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'right' and set next footstep
            setDirection('right');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });
}

如果您认为上述脚本有任何问题，请告诉我。我添加 touchstart 事件的方式与脚本的其他区域相同，例如发起攻击或启动选项菜单。

Answer 1

似乎这是点击突出显示。

您可以尝试在控件上应用 -webkit-tap-highlight-color CSS 属性来禁用此效果，或使用 * 选择器在所有元素中禁用此效果。

例如：

.someelement {
    -webkit-tap-highlight-color: transparent;
}

Answer 2

我们在使用 Translate3d 转换时遇到了这个问题。

我们通过设置来修复它

* { -webkit-transform: translate3d(0,0,0,); }

，以便每个元素都针对 3d 空间进行初始化

Answer 3

首先，确保您在事件上调用 PreventDefault()。我注意到，如果您也针对鼠标事件，它们可以在触摸时触发。否则，我使用稍微不同的方法来禁用触摸突出显示。尝试：

 -webkit-tap-highlight-color: rgba(0,0,0,0);

在按钮的 CSS 中。