Geek Answers Handbook

Is it really possible to disable all click events on the first touchstart event?

Creating a nice responsive website is relatively difficult due to conflicts between touchstart, tap and 300ms with a delay.

Ofcourse vclickshould fix these problems, but they seem to have problems fixing it. From the documentation:

Warning. Use vclick with caution

Use vclick with caution on touch devices. Browser-based web browsers synthesize mousedown, mouseup, and click events approximately 300 ms after the touchhend event is dispatched. The purpose of the synthesized mouse events are calculated at the time of their sending and are based on the location of touch events and, in some cases, specific implementation heuristics, which leads to different goals of calculations on different devices and even different OS versions for the same device. This means that the target element in the initial touch event may differ from the target element within the synthesized mouse events.

We recommend that you use click instead of vclick at any time when the action has the ability to change the content under which it has been touched on the screen. This includes page transitions and other behaviors such as crashing / expanding, which can lead to a screen shift or completely replaceable content.

Now I'm thinking of making something simpler. Whenever the touchstart event fires, I know that it is a touch device. I just turn off all click events and start listening only to touchstart events (or touch). Ignoring delay events with a delay of 300 ms.

Of course, there are devices with a mouse and touch, but people who use them at the same time seem to me a minority.

Is this a good idea, or am I missing something in my thoughts?

+4
4

... , , , , ?

300 Android <meta name="viewport" content="width=device-width">. , iOS, , .

, - , , 300 iOS. , .

, . - , , , , . .

. , -.

+2

, , . , , , , , . , , , . , , , , (), .

, , . DOM .

var isTouchDevice = 'ontouchstart' in document.documentElement;

KevBurnsJr.

, , , , , ,

event.type

!

+1

touchstart, . . / .

: " 300 ".

, click. . touchstart . touchend, touchstart. : https://developers.google.com/mobile/articles/fast_buttons

fastclicks, fastclick script fastclick github vclicks.

+1

, , JQuery, :

$elem.on('click touchstart', function(e){
   var $self = $(this);
   if(e.type == 'touchstart'){ 
      $self.mouseenter(); //fire events you still need 
      e.preventDefault();
   }
   /* your code */
});

, , .

iPad, , , hover , , , , , .

, , "tap", , JQuery.

0

More articles:


All Articles