Solution to the problem that jquery mobile's touch click event will trigger multiple times_jquery

jquery mobile provides the following event monitoring for gesture touch:

Copy code The code is as follows:

tap Triggered when the user taps the screen
taphold Triggered when the user taps the screen and keeps touching for more than 1 second
swipe Triggered when the page is dragged vertically or horizontally. This event has its associated properties, which are scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft Triggered when the page is dragged to the left direction
swiperight Triggered when the page is dragged to the right direction

However, when the tap event was tested on Windows 8 touch devices and Android devices, it was triggered multiple times with one click.
After testing, the response time of the tap method is significantly faster than the onclick event, so we can use the click event to handle the response of the tap event. Sample code reference is as follows:

However, when the tap event was tested on Windows 8 touch devices and Android devices, it was triggered multiple times with one click.
After testing, the response time of the tap method is significantly faster than the onclick event, so we can use the click event to handle the response of the tap event. Sample code reference is as follows:

Copy code The code is as follows:

Zhiwen Studio

Zhiwen Studio

Menu

　

< ;/div>
<script><br> //Tap the screen<br> //$('div#article').on("tap",function(event){<br> $(' div#article').on("click",function(event){<br> event.stopPropagation();<br> console.log(111111);<br> if(event.clientY < 80){<BR> //Click the upper part of the page, then slide up <BR> if(document.body.scrollTop<1) return;<BR> var scrollPosY = document.body.scrollTop - document.body.clientHeight 100;<BR> $.mobile.silentScroll(scrollPosY);<BR> }else if(event.clientY > document.body.clientHeight - 80){<br> var scrollPosY = document.body.scrollTop document.body.clientHeight - 100 ;<br> if(scrollPosY < document.body.scrollHeight){//The visible height of the top cover <the height of the webpage body, then scroll one screen<BR> $.mobile.silentScroll(scrollPosY);<BR> } <BR> }<BR> });<BR> for(var i=1;i<200;i ){<BR> $('#article ol').append('<li>th ' i ' Line: Zhiwen Studio</li>');<br>}<br></script>

Another alternative method:
JQueryMobile's tap event on Android devices will be triggered multiple times. Our solution is to use Google FastButton and use fastbutton to handle the places where tap was originally required.

Another alternative method reference:
JQueryMobile's tap event on Android devices will have the problem of being triggered multiple times. Our solution is to use Google FastButton and use fastbutton where tap is originally required. deal with.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn