Method sharing for adding Webkit touches to jQuery

Here's my implementation.
Paste the code first:

//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 for 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.htmlEvent);
    }
}(window.jQuery);

There's a lot of information available on the Internet about the Touch event, so I won't go into details and can explain it more simply.

Touch events instead of mouse events
On Webkit mobile devices, touch manipulation triggers the touch event first, and the mouse event is touched after 0.5 seconds.

Personally, this is understandable in terms of design. Meet the requirements of touch control, and then "down" compatible with mouse events, to meet the original desktop-oriented web use.

The approximate sequence of events is: touchstart-> Touchmove - > Touchend - > S - 0.5 > Mouseover /scroll/click, etc

According to the design of webkit mobile browser, generally the development of desktop web development, and then the use of mobile devices is no problem. But the hover effect, which is heavily used on the desktop, is often a tragedy when a touch triggers a mouse event +click event all over; The 0.5 second delay also does a lot of damage to the user experience.

So I added the tapOrClick event, which was used to replace the click event, and killed the 0.5 second.

Scroll lock
When the user USES the touch device to scroll and the touch has stopped, the browser locks the entire page, pausing all UI resources, and leaving most of the resources to the kernel to scroll. The same thing can happen with zooming in and out of page content, or worse.

Since I wanted to add a scrollgradient effect, I added the moveOrScroll event to perform the effect that should be performed in the scroll while sliding.

Of course, this isn't perfect, because once the finger is off the screen (the touch event stops), js will freeze while the page is free to scroll. It's just a way out of a way.

Another problem with rolling locks is that there are three types of rolling: up and down, left and right, and free.

A simple touch device will show that if the scroll is judged to be up and down from the start of the touch, no amount of left or right sliding during the touch will have the effect of left or right sliding, unless you let go and start again. The same thing happens when you start rolling left and right. So if you're going to scroll freely you're going to have to start rolling diagonally.

At this point, if you need to add a specific event, you need to pay attention to the judgment of the event. In jQuery's event callback parameter, if the parameter is named e, it is generally used:

E.o. riginalevent. touches[0]. PageX can detect touches. The development needs to record the situation of the touch event before making judgment.

The native optimal
Try not to use too many JS methods to trigger styles that are not in their own right.

For example, if the element is static, we should use position:fix; To implement, but many developers will be using js to constantly refresh its control location to solve.

This implementation on a touch device typically results in only two situations:

1. The card you to death
2. The page is frozen, and after the freezing technique, it suddenly finds that all the events have been executed (as mentioned above, the browser will concentrate the resources of the UI thread to give priority to the kernel).
The average mobile device has an effective screen refresh rate of less than 30Hz, and the CPU itself is a bit slower in the compact instruction set, plus most mobile devices are... Android...

Therefore, performance must depend as much as possible on the methods that are provided natively. Some hacks and covers are too much for each other.

How to use
At the time, I didn't write the code very well because the part-time delivery seemed like a week or two, but it worked. The general usage is consistent with normal jQuery events, and the naming and implementation aspects are really questionable:

$('.sign .usernametip').tapOrClick(function () {
    $(this).css('visibility', 'hidden');
    $('.sign .username').focus();
});

Like a lot of things in a project, many things seem simple, but in fact there are all kinds of problems.

Touch events are not simply compatible, but they implement the most fundamental of all concerns - specific interaction patterns.

For example, a lot of space needs to be hidden in the touch to leave more space for the limited user's screen. Many of the elements that are switched by clicking themselves should be switched to sliding in the best experience of touch, and even different sliding situations should be considered. Different stay events of touch events may represent different operations and need to be distinguished...

Although know jQuery Mobile and other has been more perfect methods, but is unable to help themselves to implement it.