Sharing the way to add WebKit touch to jquery

  This code is what I was bored with when I was doing a part-time job for 13 years, adding support for jquery to add touch events. Because it's a bit boring, I've added a responsive web page +JS touch compatible with mobile devices, mainly WebKit mobile devices

This code is what I was bored with when I was working on a part-time job for 13 years, adding support for jquery to add touch events. Because it's a bit boring, we've added a responsive web page +JS touch compatible with mobile devices, mainly WebKit mobile devices.   Here to share my implementation. First put the code:     Code as follows://published by Indream Luo//contact:indreamluo@qq.com//version:chinese 1.0.0  !functio N ($) {    Window.indream = Window.indream | | {};     $.indream = Indream;      //define events     Indream.touch = {        evenlist: {            Touchstart: {                htmlevent: ' Touchstart '            ,             Touchmove: {                htmlevent: ' Touchmove '            },     &NBSP ;       Touchend: {              htmlevent  : ' Touchend '   &NBS P        },     &NBSp       Taporclick: {                Eventfunction:function (action {                    $ (this). each (function () {                        (function (hastouched) {                            $ (this) Touchend (function (e) {      &NBSP ;                         hastouched = true;                                 action.cal L (this, e);                                                         $ (this). Click (Function ( e) {                                if (!hastouched) {        &NBSP ;                           Action.call (this, e);                                }   & nbsp                        }                        }. Call (this, false);                    }                       return this;                 &nbsp            },     ;       Moveorscroll: {                Eventfunction:function (acti On) {      &NBsp             $ (this). each (function () {              &NBS P         (function (hastouched) {                            $ (this). Touchmove (function (e) {                &NBS P               hastouched = true;                                 action.cal L (this, e);                                                         $ (this) scroll (function (e) {                                if ( !hastouched) {                &NBSP                   Action.call (this, e);                                }   & nbsp                        }                        }. Call (this, false);                    }                       return this;                            }        }    }      //add events into the jquery     for (Var eventName in Indream.touch. Evenlist) {        var event = Indream.touch.evenlist[eventname];         $.fn[ev Entname] = Event.eventfunction | | (function (EventName, HTMLEvent) {            return function (action) {            &N Bsp   $ (this). each (function () {                    $ (this). Bind (Htmle vent, action);                    //add Event listener method for IE or others                     if (this.attachevent) {                        this.attachevent (' on ' + htmlevent, function (e) {      &N Bsp                     $ (this). On (EventName);                        }                    } else {            & nbsp           This.addeventlistener(Htmlevent, function (e) {                          &NBS P $ (this). On (EventName);                        }                                   & nbsp });                   return this;            }        } (EventName, event.htmlevent);    }} (Window.jquery);       Online can find a lot of information about touch events, so I do not elaborate, can be explained more simply.   Touch events in place of mouse events on WebKit mobile devices, touch control triggers the touch event first and then touches the mouse event in 0.5 seconds.   Personally feel that this is designed to be understood. Meet the needs of touch control first, and then "down" compatible with mouse events to meet the original desktop-oriented use of the page.   All events are roughly executed in sequence:touchstart->touchmove->touchend->0.5s-> mouse events Mouseover/scroll/click   According to WebKit Mobile browser design, the general development time according to the desktop page development, and then use mobile devices is no problem. However, the large number of hover on the desktop often cause the mouse event +click event to be triggered over and over again by touch, and the 0.5-second delay can also cause great damage to the user experience.   So I added the Taporclick event for the purpose of replacing the Click event and killing the 0.5 seconds.   Scrolling lock when the user scrolls with a touch device and the touch has stopped, the browser locks the entire page, pauses all UI resources, and leaves most of the resources to the kernel for scrolling. The same situation will happen when zooming in and out of the page, or even more.   Because of the effect of adding a scrolling gradient, I added the Moveorscroll event to perform the scrolling effects that should be performed while sliding.   Of course, this is still not perfect, because once the finger left the screen (Touch event stop), the page free scrolling this time, JS will also be freeze. It's just a way out of the way.   Scrolling lock can also cause another problem: there are three kinds of scrolling, respectively, up and down, around, free.   Using a touch device will find that if the start from the touch is determined to scroll up and down, then the touch of how to slide around will not have the effect of sliding around, unless let go again. The same situation can occur at the beginning of the left and right scrolling. The free scrolling word needs to be scrolled from the beginning.   At this time, if you need to add a specific event, you need to pay attention to the event. In jquery's event callback parameter, assuming the parameter is named E, then the general use:   E.originalevent.touches[0].pagex can judge the touch situation. The development of the need to record their own touch events before making a judgment.   Original Optimal Please try not to use a lot of JS method to trigger to achieve some of the style effect does not.   such as element static, should be used Position:fix, but many developers will be using JS constantly refresh its control position to solve.   This implementation is on the touch device, there are usually only two cases:   1. You're 2. Page is frozen, frozen technology suddenly found that all the events have been executed (for example, the browser will centralize the resources of the UI thread to the kernel first) General mobile device Screen effective refresh rate is 30Hz, the reduced instruction set CPU itself will be slower, plus most of the mobile devices are ... Android ...   Therefore, performance must rely on native-provided methods as much as possible. Some hack and cover methods are unbearable to each other.   How to use it because it seems like a two-week job at the time, so you don't write the code too well, but it still works. The approximate usage is consistent with ordinary jquery events, and the naming and implementation aspects are really debatable:     Copy code is as follows: $ ('. Sign . Usernametip '). Taporclick (function () {    $ (this). CSS (' visibility ', ' hidden ');     $ ('. Sign. Usern Ame '). focus (); });     As with many things in the project, many things seem simple, but in fact there are all kinds of problems.   Touch events are not simply compatible, but they also need to worry about the most substantial issues--specific interaction patterns.   such as touch need to hide a lot of space to leave more space to the limited user screen; Many of the elements of their own click-by-switch should be changed to a sliding switch in the best experience of the touch, even with different sliding conditions; touching the events in different events may represent different operations and need to be judged. ...   Although you know jquery mobile and so on have a relatively perfect various methods, but just can't help oneself realize a look.