I was writing a mobile web page these days, and I used the touch screen sliding effect, that is, when I was sliding right, the hidden menu on the left was drawn out from the left.

After finishing, it works fine in the mobile phone’s native browser, but when I open it in QQ and wechat, I find that TouchMove will only trigger once, and TouchEnd often does not trigger.

Then I googled the question, and here’s why

The main reason is that the kernel may not always process the TouchMove event due to the 200ms timeout. Once the timeout occurs, all subsequent events will be handed over to the UI for processing, so TouchMove will not be triggered all the time. To address developer needs, it is recommended that developers call event.preventDefault on TouchStart so that the kernel is guaranteed to fire the TouchMove event altogether.

Address: bbs.mb.qq.com/thread-2017…

As stated above, the event.preventDefault() method has been added to touchStart and it works on QQ and wechat.

But!! The hyperlink click on the page did not respond!! Click events added to other locations are no longer triggered!!

Continued to baidu, and found that when click on mobile terminal screen, will in turn trigger touchstart, touchmove, touchend, click event.

Then I tested it and found that the correct triggering process should be: TouchStart → TouchMove → touchEnd or TouchStart → touchEnd →click.

The click event will not be triggered if you swipe your finger while clicking the screen.

Refer to the address: www.tuicool.com/articles/3Q…

The event.preventDefault() method above prevents the event’s default behavior. This can be prevented by calling the preventDefault() method.

I know event.preventDefault() will prevent the a TAB from doing its default action, but why isn’t Click triggering either?

Then I ventured to speculate:

Could it be that on the mobile side the trigger condition for the click event is that both touchStart and TouchEnd must be triggered to trigger click? If I call event.preventDefault in touchStart, is it causing the browser to think that the touchStart event is not being triggered, only the Touchend event is being triggered, so the click event is not being triggered?

After that I delete the event.preventDefault method in touchStart and sure enough the hyperlink and click events are triggered, but the issues mentioned above are happening again, the touchMove and Touchend issues are happening again in QQ and wechat.

What to do?

If the event. PreventDefault is added to TouchStart, it will prevent the click event from being triggered. Should I add it to TouchMove?

Holding a try mentality, sure enough, click can be triggered smoothly, QQ and wechat there is no problem, I thought it was good, but why the page can not roll?

The event.preventDefault method will prevent the browser from scrolling by default…

Therefore, the page could not scroll, and I searched for it for a long time without finding out how to solve this problem. Suddenly, I remembered that I used a mobile image rotation plug-in.

Why they can swipe left and right without affecting click events and a tags, and without affecting page scrolling.

Then I opened the source code for the plugin and finally found the answer in TouchMove

Here’s the code in TouchMove (which I copied and simplified myself) :

var w = x<0? x*- 1:x;     // The slide value of the X-axis
var h = y<0? y*- 1:y;     // The slide value of the Y-axis
if(w>h){                // If you slide in the X-axis
   event.preventDefault();
}
Copy the code

If it’s on x (left or right), call event.preventDefault(). If it’s on Y (up or down), Event.preventdefault () is not called.

Then test, effects in QQ and wechat have no problem, click event and a tag link can be triggered smoothly, page scrolling is no problem.

All l the problems were solved at last.

To sum up:

On QQ and wechat (as well as other browsers, but I haven’t tested it yet), if you need to use the Touch event, be sure to add the event.preventDefault() method to either TouchStart or TouchMove.

If there is an event.preventDefault() method in TouchStart, the click event and a tag method will not fire. You can use tap instead of click here, but the A tag is less convenient.

If you have the event.preventDefault() method on touchMove, it’s best to specify the direction, but not if your content doesn’t require a scrollbar.