jquery mobile的触控点击事件会多次触发问题的解决方法_Javascript教程-查字典教程网
jquery mobile的触控点击事件会多次触发问题的解决方法
jquery mobile的触控点击事件会多次触发问题的解决方法
发布时间:2016-12-30 来源:查字典编辑
摘要:jquerymobile对手势触控提供了如下几个事件监听:复制代码代码如下:tap当用户点屏幕时触发taphold当用户点屏幕且保持触摸超过...

jquery mobile 对手势触控提供了如下几个事件监听:

复制代码 代码如下:

tap当用户点屏幕时触发

taphold当用户点屏幕且保持触摸超过1秒时触发

swipe当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性,分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold

swipeleft当页面被拖动到左边方向时触发

swiperight当页面被拖动到右边方向时触发

但是 tap 事件在 windows8 触控设备和 android 设备上测试,均有一次点击多次触发的现象。

经测试,tap 方法的响应时间明显快于 onclick 事件,那么我们可以用 click 事件来处理 tap 事件的相应。示例代码参考如下:

但是 tap 事件在 windows8 触控设备和 android 设备上测试,均有一次点击多次触发的现象。

经测试,tap 方法的响应时间明显快于 onclick 事件,那么我们可以用 click 事件来处理 tap 事件的相应。示例代码参考如下:

复制代码 代码如下:

<!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 的 tap 事件多次触发问题-志文工作室</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='http://www.jb51.net' data-icon='home' data-theme='d' data-iconpos='notext' data-transition='turn'>志文工作室</a>

<h1 role='heading'>志文工作室</h1>

<a href='#menu-panel' data-icon='bars' data-theme='d' data-iconpos='notext' data-shadow='false' data-iconshadow='false'>菜单</a>

</div><>

<div data-role='content'>

<div id="article">

<ol data-role="listview" data-inset="true">

</ol>

</div>

</div>

</div>

<script>

//轻点屏幕

//$('div#article').on("tap",function(event){

$('div#article').on("click",function(event){

event.stopPropagation();

console.log(111111);

if(event.clientY < 80){

//单击了页面上半部分,则向上滑动

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){//顶部覆盖的高度+可见高度<网页体高度,则滚动一屏

$.mobile.silentScroll(scrollPosY);

}

}

});

for(var i=1;i<200;i++){

$('#article ol').append('<li>第 '+ i +' 行:志文工作室</li>');

}

</script>

</body>

</html>

另外一个替代方法参考:

JQueryMobile 在 Android 设备上的 tap 事件会出现多次触发的问题, 我们的解决方案是使用 Google FastButton,将原来需要用 tap 的地方改用 fastbutton 处理。

另外一个替代方法参考:

JQueryMobile 在 Android 设备上的 tap 事件会出现多次触发的问题, 我们的解决方案是使用 Google FastButton,将原来需要用 tap 的地方改用 fastbutton 处理。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类