All geek questions in one place

Using touchstart makes the screen fuzzy on touchstart

I am currently testing the touch screen functionality on my device (Samsung galaxy S2) for my game. I am programming with javascript and jquery wrapped in phonegap in android, and currently there are problems as follows:

  • My touch trigger event (for example, launching the touchstart attack button to launch some javascript to execute the attack action) causes my screen to become fuzzy and then return to normal in less than a second, so it’s more like flickering when images become nervous). I do not use css transforms or just css and image transitions.

Can someone please let me know if they run into more bleak similar problems. A little at a loss, whether it is a hardware or sensory problem, when I can solve this problem.

The Javascript example below for my navigation controls (left, top, bottom, and right indirect clicks):

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

Please let me know if you think something is not as described above script. The way I add the touchstart event is the same in other areas of my script, for example, to launch an attack or launch the options menu, for example.

+6
source share
3 answers

This seems to be a key backlight.

You can disable this effect by applying the -webkit-tap-highlight-color CSS property on your controls or disable it in all elements using the * selector.

For instance:

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

We encountered this problem when using translate3d transformations.

We fixed it by setting

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

so that each element is initialized for three-dimensional space

+1
source

First of all, make sure you call preventDefault () on the event. I noticed that if you also aim the mouse at mouse events, they can fire when touched. Otherwise, I use a slightly different way to turn off the touch screen backlight. Try:

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

In css for your button.

+1
source

Source: https://habr.com/ru/post/907902/

More articles:


All Articles