jquery Mobile provides several event listeners for gesture touch:
Copy CodeThe code is as follows:
Tap is triggered when the user points to the screen
Taphold triggered when the user points the screen and stays in touch for more than 1 seconds
Swipe triggered when a page is dragged vertically or horizontally. This event has its associated properties, namely 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
But the tap event was tested on WINDOWS8 touch devices and Android devices, with one-click multiple triggers.
After testing, the tap method's response time is significantly faster than the OnClick event, so we can use the Click event to handle the corresponding tap event. The sample code is referenced below:
But the tap event was tested on WINDOWS8 touch devices and Android devices, with one-click multiple triggers.
After testing, the tap method's response time is significantly faster than the OnClick event, so we can use the Click event to handle the corresponding tap event. The sample code is referenced below:
Copy CodeThe code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>jquery Mobile's Tap event multiple triggering problem-Chi Wen Studio </title>
<link rel= "stylesheet" href= "Http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<script src= "Http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script src= "Http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" ></script>
<style>
. Article{height:10000px;text-align:center}
</style>
<body>
<div data-role= ' page ' >
<div data-role= ' header ' data-theme= ' B ' data-position= ' fixed ' >
<a href= ' http://www.jb51.net ' data-icon= ' home ' data-theme= ' d ' data-iconpos= ' notext ' data-transition= ' turn ' > Chi Wen Studio </a>
<a href= ' #menu-panel ' data-icon= ' bars ' data-theme= ' d ' data-iconpos= ' Notext ' data-shadow= ' false ' data-iconshadow= ' False ' > Menu </a>
</div><!--/header--
<div data-role= ' content ' >
<div id= "article" class= "article" >
<ol data-role= "ListView" data-inset= "true" >
</ol>
</div>
</div>
</div>
<script>
Tap the screen.
$ (' div#article '). On ("Tap", function (event) {
$ (' div#article '). On ("click", Function (event) {
Event.stoppropagation ();
Console.log (111111);
if (Event.clienty < 80) {
When you click the top half of the page, swipe up
if (document.body.scrolltop<1) return;
var scrollposy = document.body.scrolltop-document.body.clientheight + 100;
$.mobile.silentscroll (Scrollposy);
}else if (Event.clienty > document.body.clientheight-80) {
var scrollposy = Document.body.scrollTop + document.body.clientheight-100;
if (Scrollposy < document.body.scrollHeight) {//Top overlay height + visible Height < Web body height, scroll one screen
$.mobile.silentscroll (Scrollposy);
}
}
});
for (Var i=1;i<200;i++) {
$ (' #article ol '). Append (' <li> ' + i + ' line: Chi-wen Studio </li> ');
}
</script>
</body>
Another alternative approach is to refer to:
Jquerymobile the Tap event on the Android device is triggered multiple times, and our solution is to use Google Fastbutton, where the original need to use tap to Fastbutton processing.
Another alternative approach is to refer to:
Jquerymobile the Tap event on the Android device is triggered multiple times, and our solution is to use Google Fastbutton, where the original need to use tap to Fastbutton processing.
jquery Mobile provides several event listeners for gesture touch: