Mobile Click Event-All Raiders

Students who have been exposed to mobile development may face the first question of a click event: the 300ms Latency response of the Click event. The inability to respond immediately to the experience has caused a great deal of trouble, so the solution to this problem becomes inevitable.

The solution to this problem is: zepto.js the tap event. The tap event can be understood as the Click event on the mobile side, and zepto.js is often used in the development of H5 to replace jquery because it almost completely replicates the jquery API.

Because of the modularity of the reasons, causing some students to download the Zepto.js module is not complete, resulting in a lot of tragedy, thought Zepto.js does not support some methods, so, download the time to pay attention to a little.

However, this is not the end of the story, because the tap event solves a 300ms latency problem, but it brings a new major bug, click through .

Click through the meaning, that is, if an absolute positioning or fixed positioning element is at the top of the page, the element is bound to a click event, then you click this point corresponding to the following is usually a click event or a tag will be triggered execution. Here does not map, self-brain to fill various pop-up windows, this situation is still very much.

In order to solve this problem, some people try to use Touchend to fix. Touchend will trigger once when the finger leaves the phone screen. No 300ms latency, no Click through, looks like a perfect solution. But!

First here is a brief summary of a small knowledge point.

Mobile with Touchstart, Touchmove, Touchend, and tap
PC side has MouseDown, MouseMove, MouseUp, click.

Their relationship and function can almost correspond, respectively, to press, slide, loosen. The PC can be dragged with the previous three events, and the mobile end can be slid with the previous three events.

So, instead of MouseUp to replace the click on the PC, it is triggered when he releases the mouse, causing the MouseUp and Touchend events to be triggered if I slide to the target element in a far area and then release. So in this case it is not in accordance with the definition of click event. And if you're in a situation where you need to bind and drag and click on an event, there's no way to solve it.

Another important reason is that touchend cannot be used to replace clicks, because the PC side is not supported. Bosses often want their pages to be more than just on the mobile side, so there are other options.

I know an experienced classmate reading this article, I have been thinking fastclick.js . Yes, for the time being, this is a very good solution. To solve the problem of 300ms latency, Zepto.js gives a solution to the tap event substitution, while Fastclick.js is trying to get the click event to be delayed. So still using the Click event, there is no problem of clicking through.

First, try to introduce fastclick.js.

<script type= ' application/javascript ' src= '/path/to/fastclick.js ' ></script>

If you use Native JS development, make the following statement.

if inch document) {    Document.addeventlistener(function() {        Fastclick.attach (document.body);     false );}

If you want to use jquery

$ (function() {    Fastclick.attach (document.body);});

If you are using a COMMONJS-style framework, such as Requirejs

var attachfastclick = require (' Fastclick '); Attachfastclick (document.body);

Amd

var Fastclick = require (' Fastclick '); Fastclick.attach (document.body, options);

After making the corresponding declaration, you can confidently use the Click event in the Mobile page. When it comes to this, there is a question about the choice of zepto.js and jquery. Said can write a large article, in short, the actual development you will find Zepto is still a bit less cool, although small, since the click Delay problem has been solved, I still prefer to use jquery.

Of course, the pit we're going to tread is not over--!

Recently developed a small page, financial calendar, in the Calendar section, I need to delegate each day of the element event to obtain the information of the day, but also to the entire calendar part of the implementation can swipe left and right to select the last month and next January features. So I need to simultaneously bind the click event to the Calendar section and implement the Touchstart,touchmove,touchend event for sliding.

The problem arose at this time. On an Android phone, on the same element, if I bind the Click event, and then bind the Touchstart event, the Click event is in a state that is almost dead. Even with the Fastclick incident, this problem cannot be avoided.

The error demo is probably as follows

function () {    //  Click to get information about the day on each day }) // achieve left and right swipe function () {}).on (function() {}). On (function() {})

Hands-on ability of students can go to try this pit, in this case, Fastfclick must not be able to solve. What to do?

My first attempt was to run the contents of the Click event when the sliding distance was 0. We know that in the implementation of sliding [do not know how to achieve the classmate, it is time to pay attention to my public number, search isreact find me], will calculate a sliding distance.

1 //approximate code to implement sliding2 3 //the initial value of the sliding element Translatex4 varIscroll =Device_width,5 6     //The median value used to calculate7Istarx = 0,8     9     //finger The first point of the x-coordinate on the screenTenIstart_pagex = 0;  One     A //Binding Events -$area. On (' Touchstart ', Touchstart) -. On (' Touchmove ', Touchmove) the. On (' Touchend ', touchend); -  - functionTouchstart (event) { - Event.preventdefault (); +Istartx =Iscroll; -Istart_pagex = Event.originalevent.changedtouches[0].pagex; + } A  at functionTouchmove (event) { -  -     //The x-coordinate of the finger position is constantly changing during the slide, where a difference between the current position and the initial position is saved. -     varDistance = Event.originalevent.changedtouches[0].pagex-Istart_pagex; -Iscroll = Istartx +distance; -  in     //here is a CSS method that I have customized to set the current value of the element Translatex - utils.css (area, {translatex:iscroll}); to } +  - functionTouchend (event) { the     varDistance = Event.originalevent.changedtouches[0].pagex-Istart_pagex; *$area. Off (' Touchstart touchmove touchend '); $ Panax Notoginseng     //perform different actions based on differences in difference values -     if(Distance <-80) { theSlidenext (function() { + Addeventslider ($area); A         }) the     } +     Else if(Distance > 80) { -Slideprev (function() { $ Addeventslider ($area); $         }) -     } -     Else if(Distance = = 0) {         the         /*The value of the errand is 0 o'clock, and I think it was executed once a click*/ -         Wuyi Addeventslider ($area); the     } -     Else { WuAni (area). Animate (+, ' easeout ', {x:-device_width},function() { -Iscroll =-Device_width; About Addeventslider ($area); $         }) -     } -}

The above is the implementation of my sliding function, there will be some custom methods, so there is no way you can directly copy the past run. But the principle has been said to be clear, you can try some simple implementation. Follow me the public number will have more detailed explanation Oh!

My attempt to do this is to think that this is a click when the slip difference is distance to 0, so do the actions that the click event should have. Originally I thought this would be able to solve, the test also passed the time. But--! Product classmate very have to hold on the calendar click on more than 50, the results found that after several clicks, at the point on the loss of effect!!!

When I found this bug, my heart was broken. Well, it can only be said that the idea of trying to replace click events with Touchend is still a bit immature. Bite the bullet and try to solve the problem. Think twice about solutions and ultimately decide to encapsulate a tap event yourself. The code for the encapsulated tap event is as follows.

Http://yangbo5207.github.io/static/demo/single-instance/js/dev/tap.js

This is an extension of the jquery event, allowing jquery to use tap events as well. It can be used immediately after the introduction of jquery. In addition, the Longtap,swipe two events are expanded.

Use the same way as others.

function () {}); $area. Tap (function() {})

Of course, the tap, which I encapsulated, still has a click-through bug that can't be avoided, so the final solution is to use the Click event for the elements that need to tie both the fixed-point and sliding events, with tap events. Need to combine my tap.js and fastclick.js to solve this problem perfectly. Heart tired Ah, finally is done.

OK, about the mobile end of the Click event Summary, you may not have thought of a simple click event will have so many pits, if you may be involved in the work of mobile development, I believe this article is worth you point like and collection, after all, is stepping on so many pits experience summary.

Mobile Click Event-All Raiders