Add Webkit touch method support for jQuery

I received an email a few days ago, and a part-time project was transferred to another person. The person who followed up asked me about the copyright of the relevant code. I am happy. This code is boring when I was working as a part-time employee for 13 years, and added support for touch events for jQuery. Because it was a bit boring, we helped customers add mobile devices compatible with responsive web pages and JS touch, mainly Webkit mobile devices. Here I will share my implementation. Paste the code first: copy the code // Published by Indream Luo // Contact: indreamluo@qq.com // Version: Chinese 1.0.0! Function ($) {window. indream = window. indream | {}; $. indream = indream; // Define events indream. touch = {evenList: {touchStart: {htmlEvent: 'touchstart'}, touchMove: {htmlEvent: 'touchmove '}, touchEnd: {htmlEvent: 'touchend'}, tapOrClick: {eventFunction: function (action) {$ (this ). each (function () {(function (hasTouched) {$ (this ). touchEnd (function (e) {hasTouched = true; action. call (This, e) ;}); $ (this). click (function (e) {if (! HasTouched) {action. call (this, e );}});}). call (this, false) ;}); return this ;}, moveOrScroll: {eventFunction: function (action) {$ (this ). each (function () {(function (hasTouched) {$ (this ). touchMove (function (e) {hasTouched = true; action. call (this, e) ;}); $ (this ). scroll (function (e) {if (! HasTouched) {action. call (this, e );}});}). call (this, false) ;}); return this ;}}// Add events into jquery for (var eventName in indream. touch. evenList) {var event = indream. touch. evenList [eventName]; $. fn [eventName] = event. eventFunction | (function (eventName, htmlEvent) {return function (action) {$ (this ). each (function () {$ (this ). bind (htmlEvent, action); // Add event listener method f Or IE or others if (this. attachEvent) {this. attachEvent ('on' + htmlEvent, function (e) {$ (this ). on (eventName) ;}) ;}else {this. addEventListener (htmlEvent, function (e) {$ (this ). on (eventName) ;}}}); return this ;}) (eventName, event.html Event) ;}} (window. jQuery); copy the code online to find a lot of information about the Touch event, so I will not elaborate on it, can be explained simply. The Touch event replaces the mouse event on the Webkit mobile device. The touch event is triggered first after 0.5 seconds. I personally think this is understandable in design. First meet the needs of touch control, and then "down" compatible with mouse events, to meet the original use of desktop web pages. The general execution sequence of all events is: touchstart-> touchmove-> touchend-> 0.5 s-> mouse event mouseover/scroll/click and so on according to the webkit mobile browser design, generally, it is okay to develop based on the desktop web page and use it on mobile devices. However, a large number of hover effects on the desktop often trigger mouse events and click events by touch. The latency of 0.5 seconds also causes great damage to the user experience. So I added the tapOrClick event to replace the click Event and destroy the 0.5 s. Scroll lock: when the user uses the touch device to scroll, and the touch has stopped, the browser will lock the entire page, pause all UI resource occupation, and leave most of the resources to the kernel for scrolling. In the same situation, the page content will be zoomed in and out, or even worse. I added the moveOrScroll event because I want to add a special effect for the rolling gradient. When sliding, I want to execute the rolling effect. Of course, this is still not perfect, because once the finger leaves the screen (the touch event stops), the page will be freely rolled during this time, js will also be freeze. This is just a solution. Scroll locking also causes another problem: Scroll up and down, left and right, and free. When you touch the device, you will find that if you are determined to scroll up or down from the touch, then the sliding between the left and right will not have the effect of sliding left and right, unless you let it go again. In the same case, the scroll is left and right at the beginning. If you want to scroll freely, You Need To scroll in Oblique direction at the beginning. If you need to add a specific event at this time, you must pay attention to the event judgment. In the Event Callback parameter of jQuery, assume that the parameter is named e. e. originalEvent. touches [0]. pageX can be used to determine the touch. During development, you must manually record the touch events before making judgments. Native optimization, please try not to trigger it with a large number of JS methods to achieve some style effects that do not exist. For example, the position: fix is applied when the elements remain static, but many developers use js to constantly refresh their control positions. This implementation method is put on the touch device. Generally, there are only two situations: freezing your page, freezing the technology, and suddenly discovering that all the events have been executed (the reason is as above, the browser will focus on the resources of the UI thread to give priority to the kernel. Generally, the screen update rate of mobile devices is only 30Hz, and the CPU of the simplified instruction set itself will be slower, in addition, most mobile devices are... android... therefore, the performance must be dependent on native methods as much as possible. Some methods of Hack and Cover cannot be used by the other party. How to use it at that time because part-time delivery was like a week or two, so I didn't write the code too well, but I still could use it. The general usage is the same as that of common jQuery events. The naming and implementation aspects are indeed worth considering: $ ('. sign. usernametip '). tapOrClick (function () {publish (this).css ('visibility ', 'hiddy'); $ ('. sign. username '). focus () ;}); similar to many things in the project, many things seem simple, but in fact there are various problems. Touch events are not simply compatible. When you implement a single function, you also need to worry about the most substantive issues-specific interaction modes. For example, you need to hide a lot of space in the touch to leave more space for the limited user's screen; many elements of click switching should be changed to slide switching in the best experience of the touch, you even need to worry about different sliding situations. Different touch events may represent different operations and need to be identified ...... although jQuery Mobile and other methods have been well developed, you can't help but implement them by yourself.