jquery sets the move-side click Timeout method based on $.ajax _jquery

The example in this article tells you that jquery sets the mobile end Click Timeout method based on $.ajax. Share to everyone for your reference, specific as follows:

This describes how the jquery click event is automatically converted to Touchstart events at the mobile end.

Because the move-side click event is a bit slower than the Touchstart event

The sequence of event execution on a mobile device element is:

Touchstart

Touchmove

Touchend

Click{mousedown->mousemove->mouseup}

The Click event is recognized on the mobile device but is the last execution, so if you do not change the click event to a Touchstart event, it may cause a delay and slow the interaction.

Therefore, it is best to change the click event to Touchstart event at the mobile end.

So how to add an event is easier.

The following is the wording:

var handle = function (e) {
e.preventdefault ();//block browser default behavior
alert (' Fuck world ');
}
$ (' body '). On (' Touchstart MouseDown ', handle);

In this way, alert is executed only once on the PC-side browser, triggering an event that is MouseDown

In the iOS device Safari browser, alert also executes only once, triggering an event that is Touchstart

Why do you only do it once?

The secret is that when the execution is Touchstart, the Preventdefault drops the following click and does not execute, "very perfect".

^_^! As always, the Android device is a must, the test found that other browsers except QQ browser will alert two times

That is, the handle functions of Touchstart and MouseDown are executed, and it seems that e.preventdefault () does not work. The specific reason is unknown ...

Because to be compatible, so there is no way to add events only by deciding whether to support touch events.

Then extend a jquery method plugin. A plug-in method that imitates an on method, such as Quickon, (if you don't know how to use the on method, go away and get out of here ...) ）

;(function () {
  var Istouch = (' Ontouchstart ' in document.documentelement)?　　' Touchstart ': ' click ';
 if (!$.fn.quickon) {
   $.fn.quickon= function () {
    arguments[0] = (arguments[0] = = = ' click ')? Istouch:arguments[0] ;
    Return $.fn.on.apply (this, arguments);
   };
  }
();

Quickon Although the name is a little awkward, but can use, for example:

$ (' body '). Quickon (' click ', Function () {
 alert (' Fuck world ');
})

Amount of ... Then think about it, why not just overload the jquery on method??

Come on, give it a try.

;(function () {
  var Istouch = (' Ontouchstart ' in document.documentelement)? ' Touchstart ': ' click ', _on = $.fn.on;
   $.fn.on = function () {
    arguments[0] = (arguments[0] = = = ' click ')? Istouch:arguments[0];
    Return _on.apply (this, arguments);
   };
} ();

More interested readers of jquery-related content can view the site: The summary of AJAX usage in jquery, the summary of jquery switching effects and techniques, the summary of jquery drag-and-drop effects and techniques, the summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.