In div. Main, there are two child elements. Left and. Right. Normally, the left element fills the entire main, but when you click left, the right element is 200px wide and appears on the right.

Add an active class to right and make the width of right 200px as follows:

In normal PC browsers, there is no touchStart event, so when you click on the left side of the left element, the console will only print the left click and timestamp, and then the right element will appear on the right side. The right click event is not triggered.

Then, when we click on Chrome to switch debug mode to mobile, refresh the page, and re-click on the left side of the left element, a completely different result is displayed in the console:

The left touchStart event and the right click event were triggered at the same location clientX, clientY, with an interval of about 300ms, while the left click event was not triggered. Because when the touchStart callback is triggered, right is already on the right, and then click in the same position is triggered, and the click event is applied to right, triggering the click callback for right.

This is the actual problem I encountered in the project. The project was built by Vue and originally ran on PC, but then needed to run on pad due to business requirements. After using cordova to cover the shell, there was no problem in running, but the click delay of 300ms was quite dazzling. Considering the cost of modifying the code and the need to adapt to both PC and pad, I chose to introduce Vue-Hammer to solve the click delay problem.

However, the plan failed to catch up with the changes. Originally, the right was fixed, but due to the move to the pad, product design and UI interaction need to be modified. The pad screen is small, so the right always seems to take up some space. Then there are a series of action buttons in right. After the change, the tragedy is found. After clicking left, the action button in right is clicked.

My reaction is quite fast, suddenly thought of the mobile terminal click through the problem, leng for a while, think about it. Then, in line with the principle of CV method, I started to look up the data, and found that there were a lot of people who encountered the same problem. Although the situation of the problem was not the same, there were page jump, mask layer click and so on, but the solution to the problem was similar. There are probably the following methods:

1. Add transition effects

I’m going to add transition when the right pops up. Sounds good, has the animation sense, the code changes the momentum is small, directly to him on the arrangement, in Chrome to see everything is normal, a sigh of relief, packaged apK to run on the real machine. Had to remind you that, not all of the pad is the device, a lot of android pad with mobile phones and the performance of our PC is to (unless you can convince customers willing to spend the money), and the performance of the mixed development and primary development, a direct result of pop up on the right side of the right transition animations with constipation, literally step one card, Three steps at a time, can’t bear to look at, plan one straight out of business.

2. Add attributes to meta to speed up click events

<meta name=”viewport”content=”width=device-width,initial-scale=1.0″> Then I tried clicking.

Found that latency was significantly reduced from 300ms to around 100ms, which should be a perfectly acceptable result. Pack up and run to the iPad. It turned out that it was completely useless, didn’t have any effect, delayed or delayed, and plan two failed.

3. event.preventDefault () prevents the default Event

Add e.preventDefault() to the touchStart callback; To prevent subsequent click events from firing.

The click event in right did not fire as expected,

This is done, but since it applies to both PC and pad, you must bind both the Click and TouchStart events

After simple test, we found there is no problem, but a few more, problems arise, first of all, if like this, certainly will not support double-click events (with small problems, not just product battle, to affection, move to, let him cut double-click the function), but the problem is not only this, there was a strange state:

It’s fine in the normal area, but in Chrome mobile mode, it’s a grey dot, it’s a problem when it’s clicked on the critical area, the element should be selected normally, but the e.preventDefault () button is not in effect. Plan three: declare bankruptcy.

4. Use pointer-event of CSS3

This attribute is often used to prevent unnecessary elements from being clicked. You can use a pointer-event: None to prevent any events

So far, the plan that can find on the net all pounce street, time is past however very long, what also did not pour out. I took a break, jumped a rope, and went back to my position to think about how to prevent the click event from happening in the simplest way possible. Maybe it was inspired by the rope jump (relaxation and exercise are definitely necessary).

Although the click and touch events fire differently, they both fire from the same location, and I just need to disable the click event from that location for the next 300ms.

As with normal binding events, Hammer returns an event to me, and I can get the location where the event was triggered. Then, in order to disable the Click event from the outermost layer without waiting for the click event to bubble up, I use event capture, which has been rarely used.

After the element binding event is triggered, I listen for the Click event at the Document level and set a timer. After 350ms, I cancel the click event and use e.topPropagation (). Prevents events from being passed down. (e.s topPropagation (); Not only does it prevent bubbling, it also prevents event capture. Then you just have to determine if it’s in the zone, and if it is, you intercept it.

Once you’ve written it, try it out in the demo. The result is as follows:

This is a relatively successful interception of the click event.

There is no problem when it is applied to formal projects. After careful consideration, it basically has no impact on actual user operation and interaction, and the customer cannot immediately click the operation button on the right within 350ms. So far, this problem has come to an end.

Conclusion:

1. When you encounter problems, you can think about them first and then look up information on the Internet. What suits others may not suit your own project, and only you have a better understanding of your needs and business logic for your own project

2. When you can’t think of a problem, you should really relax properly. Thinking over your head may not be able to achieve good results

3. I hope you can pay attention to my public account, lazy dog small front, thank you