Web development, CLICK,TOUCH,TAP Event Analysis

one, Click and tap Comparison

Both will be triggered when clicked, but on the mobile web side, Click will have 200~300 ms, so tap instead of click.

Singletap and Doubletap represent single clicks and double clicks, respectively.

second, the point of tap processing

When using the tap of the Zepto framework to move a click event in the device browser to circumvent the delay response of the Click event, there is a possibility of a point-in-click that triggers a click event that is not the current layer.

Processing method:

(1),

There is a library called Fastclick on GitHub that can also circumvent the latency response of the Click event on a mobile device, Https://github.com/ftlabs/fastclick
Bring it into the page with the script tag (the library supports amd, so you can also introduce it in accordance with the AMD specification, with a module loader such as require.js), and initialize it on the body when the DOM is ready, such as:

123	$(function(){    newFastClick(document.body);})

Then bind the Click event to an element that requires "no lag click" (note that the tap event is no longer bound to zepto).
of course, You can also initialize it on the body and initialize it on a dom, so that only the DOM and its children can enjoy "no lag" clicks

In practical development, when the element is bound to fastclick, the click Response is a little faster than tap. Ha ha

(2), binding the Touchend event for the element, and adding E.preventdefault () inside;

$demo.on( ‘touchend‘ , function (e){ // 改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发      $demo.hide()      e.preventDefault(); // 阻止“默认行为” })
third, Touch Event Touch is for touching events on Touch-screen Phones. Most Touch-screen mobile WebKit cores today offerTouch Event Monitoring allows the developer to get some information when the user touches the Screen.

These include the Following:the four events of Touchstart,touchmove,touchend,touchcancel

The Touchstart,touchmove,touchend event can be analogous to the mousedown,mouseover,mouseup trigger.

Touchstart: when the finger touches the screen it triggers;

Touchmove: when the finger moves on the screen, it triggers;

Touchend: triggers when the finger leaves the screen;

and Touchcancel Many people do not know when it will be triggered and ignore it, in fact, when your finger has not left the screen, a system-level operation will trigger the touchcancel, such as alert and confirm box, Or the Function pop-up window of the Android System.

For example:

The sequence of triggering for these 4 events is:

touchmove, touchmove-- touchend

But listening to the single event above is not enough to satisfy us to do some gestures such as double-tap, long-press, left-right swipe, Zoom and so on . These events need to be monitored together to encapsulate such gestures.

In fact, many of the frameworks on the market for mobile browser encapsulated these gestures, such as jqmobile, zepto, jqtouch, but the tragedy occurred, for some Android system (i myself tested on Android 4.0.x), The Touchmove and Touchend events cannot be very well triggered, as illustrated by the example Below:

For example, when a finger drags a page down the screen, it is theoretically triggered by a touchmove, and the final touchend, but on Android 4.0, the touchmove is triggered only once, and the trigger time is almost the same as Touchstart , and Touchend is not triggered directly. This is a very serious bug, in Google issue has been a lot of people put forward http://code.google.com/p/android/issues/detail?id=19827

For the time being I only found this bug in Android 4.0 and it is said that iOS 3.x version will also be Available.

Obviously jqmobile, Zepto and so on are not aware of this bug on the monitoring implementation of the serious impact, so in the direct use of these framework event, there will be more or less compatibility issues! (personal Experience)

So I modified the Zepto event module and added some event trigger parameters to enhance Usability.

(function ($) {

$.fn.toucheventbind = function (touch_options)

{

var touchsettings = $.extend ({

Tapdurationthreshold:250,//touch screen is more than this time not as a tap

Sensitivity of scrollsupressionthreshold:10,//triggering Touchmove

Swipedurationthreshold:750,//greater than this time not as swipe

Horizontaldistancethreshold:30,//swipe the vertical direction of the move must be less than this distance

Verticaldistancethreshold:75,//swipe the trigger horizontal direction move must be greater than this distance

Tapholddurationthreshold:750,//swipe the trigger horizontal direction move must be greater than this distance

Doubletapinterval:250//swipe the trigger horizontal direction move must be greater than this distance

}, Touch_options | | {})

var touch = {}, touchtimeout, delta, longtaptimeout;

function Parentiftext (node) {

Return ' TagName ' in node? Node:node.parentNode

}

function swipedirection (x1, x2, y1, y2) {

var XDelta = math.abs (x1-x2), Ydelta = Math.Abs (y1-y2)

return XDelta >= ydelta? (x1-x2 > 0?) ' Left ': ' right ': (y1-y2 > 0?) ' Up ': ' down ')

}

function Longtap ()

{

Longtaptimeout = null

Touch.el.trigger (' Longtap ');

Touch.longtap = true;

Touch = {};

}

function Cancellongtap ()

{

If (longtaptimeout) cleartimeout (longtaptimeout)

Longtaptimeout = null

}

This.data (' touch_event_bind ', "true");

This.bind (' touchstart ', function (e)

{

Touchtimeout && cleartimeout (touchtimeout);

Touch.el = $ (parentiftext (e.touches[0].target));

now = Date.now ();

Delta = Now-(touch.last_touch_time | | now);

Touch.x1 = e.touches[0].pagex;

Touch.y1 = e.touches[0].pagey;

Touch.touch_start_time = now;

Touch.last_touch_time = now;

If (delta > 0 && Delta <= touchsettings.doubletapinterval) Touch.isdoubletap = true;

Longtaptimeout = SetTimeout (function () {

Longtap ();

},touchsettings.tapholddurationthreshold);

}). bind (' touchmove ', function (e)

{

Cancellongtap ();

TOUCH.X2 = e.touches[0].pagex;

Touch.y2 = e.touches[0].pagey;

Prevent scrolling

If (math.abs (touch.x1-touch.x2) > Touchsettings.scrollsupressionthreshold)

{

E.preventdefault ();

}

touch.touch_have_moved = true;

}). bind (' touchend ', function (e)

{

Cancellongtap ();

now = Date.now ();

touch_duration = Now-(touch.touch_start_time | | now);

If (touch.isdoubletap)

{

Touch.el.trigger (' Doubletap ');

Touch = {};

}

else if (!touch.touch_have_moved && touch_duration < Touchsettings.tapdurationthreshold)

{

Touch.el.trigger (' Tap ');

Touchtimeout = SetTimeout (function () {

Touchtimeout = null;

Touch.el.trigger (' Singletap ');

Touch = {};

}, touchsettings.doubletapinterval);

}

else if (touch.x1 && touch.x2)

{

If (touch_duration < touchsettings.swipedurationthreshold && Math.Abs (touch.x1-touch.x2) > touchSetting S.verticaldistancethreshold && Math.Abs (touch.y1-touch.y2) < Touchsettings.horizontaldistancethreshold)

{

Touch.el.trigger (' swipe '). trigger (touch.x1 > touch.x2? "swipeleft": "swiperight");

Touch = {};

}

}

}). bind (' touchcancel ', function (e) {

Touchtimeout && cleartimeout (touchtimeout);

Cancellongtap ();

Touch = {};

})

}

$.fn.touchbind = function (m,callback,touch_options)

{

If (this.data (' touch_event_bind ')! = "true")

{

This.toucheventbind (touch_options);

}

This.bind (m,callback);

}

; [' swipe ', ' swipeleft ', ' swiperight ', ' swipeup ', ' swipedown ', ' Doubletap ', ' tap ', ' Singletap ', ' Longtap '].foreach ( function (M)

{

$.fn[m] = function (touch_options,callback)

{

If (typeof (touch_options) = = "object" && typeof (callback) = = "function")

{

return this.touchbind (m, callback, Touch_options)

}

else if (typeof (touch_options) = = "function")

{

var callback = touch_options;

return This.touchbind (m, Callback)

}

}

})

}) (zepto)

The above code based on zepto, replace the original zepto this piece is ok, but independent writing is also possible, I just used the zepto bind function to do the event monitoring only, the realization of the idea is actually very clear.

A compatible workaround is to stop the default operation E.preventdefault () when touchmove the gesture trend is greater than the preset value (greater than the preset value proves the move trend), so that the Touchedn can be triggered normally. Really think that Google's bug is a bug! that greatly affect the mobile web interaction

Web development, CLICK,TOUCH,TAP Event Analysis