Home > Developer > JavaScript
Jquery mobile provides the following event listening for gesture touch:
Copy codeThe Code is as follows:
Tap triggered when the user clicks the screen
Taphold triggered when the user clicks the screen and keeps the touch for more than 1 second
Swipe is triggered when the page is dragged vertically or horizontally. This event has its associated attributes: scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
Swipeleft triggered when the page is dragged to the left
Swiperight triggered when the page is dragged to the right
However, when the tap event is tested on a Windows 8 touch device or android device, multiple clicks are triggered once.
After testing, the response time of the tap method is significantly faster than that of the onclick event, so we can use the click event to handle the corresponding tap event. The sample code is as follows:
However, when the tap event is tested on a Windows 8 touch device or android device, multiple clicks are triggered once.
After testing, the response time of the tap method is significantly faster than that of the onclick event, so we can use the click event to handle the corresponding tap event. The sample code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "zh-CN">
<Head>
<Meta charset = "UTF-8"/>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0"/>
<Title> multiple triggering of jquery mobile's tap event-Zhiwen 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>
</Head>
<Style>
. Article {height: pixel PX; 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 = 'call'> Zhiwen studio </a>
<H1 role = 'heading'> Zhiwen studio <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 ){
// Click the upper part of the page to slide 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) {// The height covered by the top + visible height <the height of the webpage body, scroll one screen
$. Mobile. silentScroll (scrollPosY );
}
}
});
For (var I = 1; I <200; I ++ ){
$ ('# Article ol'). append ('<li> '+ I + 'row: Zhiwen studio </li> ');
}
</Script>
</Body>
</Html>
For an alternative method, refer:
The tap event of JQueryMobile on the Android device will trigger the issue multiple times. Our solution is to use Google FastButton and use fastbutton to process the originally required parts.
For an alternative method, refer:
The tap event of JQueryMobile on the Android device will trigger the issue multiple times. Our solution is to use Google FastButton and use fastbutton to process the originally required parts.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
