Jquery mobile's touch click event triggers a solution to the problem many times
- 2020-03-30 02:53:40
- OfStack
Jquery mobile provides the following event monitoring for gesture touch:
tap Triggered when the user clicks on the screen
taphold When the user clicks on the screen and keeps the touch over 1 Seconds to trigger
swipe Triggered when a page is dragged vertically or horizontally. This event has its associated properties, respectively 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, the tap event was tested on both windows8 touch devices and android devices, and there was a phenomenon of one click triggered many times.
After testing, the tap method has a significantly faster response time than the onclick event, so we can use the click event to handle the tap event. The sample code is as follows:
However, the tap event was tested on both windows8 touch devices and android devices, and there was a phenomenon of one click triggered many times.
After testing, the tap method has a significantly faster response time than the onclick event, so we can use the click event to handle the tap event. The sample 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>jquery mobile the tap Event triggers the problem multiple times - Chi man 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:10000px;text-align: center}
</style>
<body>
<div data-role='page'>
<div data-role='header' data-theme='b' data-position='fixed'>
<a href='//www.jb51.net' data-icon='home' data-theme='d' data-iconpos='notext' data-transition='turn'> Chi wen studio </ a>
<h1 role='heading'> Chi man studio </h1>
<a href='#menu-panel' data-icon='bars' data-theme='d' data-iconpos='notext' data-shadow='false' data-iconshadow='false'> The 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>
//Click the screen
//$('div#article').on("tap",function(event){
$('div#article').on("click",function(event){
event.stopPropagation();
console.log(111111);
if(event.clientY < 80){
//Click on the top half of the page, and 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){//Height of top cover + visible height <Page height, scroll a screen
$.mobile.silentScroll(scrollPosY);
}
}
});
for(var i=1;i<200;i++){
$('#article ol').append('<li> The first '+ i +' Ok: chi man studio </li>');
}
</script>
</body>
</html>
Another alternative reference:
The tap event of JQueryMobile on Android devices will be triggered many times. Our solution is to use Google FastButton and change the original tap to FastButton.
Another alternative reference:
The tap event of JQueryMobile on Android devices will be triggered many times. Our solution is to use Google FastButton and change the original tap to FastButton.