jquery mobile 对手势触控提供了如下几个事件监听:
jquery mobile 对手势触控提供了如下几个事件监听:
taphold 当用户点屏幕且保持触摸超过1秒时触发
swipe 当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性，分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft 当页面被拖动到左边方向时触发
swiperight 当页面被拖动到右边方向时触发
但是 tap 事件在 windows8 触控设备和 android 设备上测试，均有一次点击多次触发的现象。
经测试，tap 方法的响应时间明显快于 onclick 事件，那么我们可以用 click 事件来处理 tap 事件的相应。示例代码参考如下：
但是 tap 事件在 windows8 触控设备和 android 设备上测试，均有一次点击多次触发的现象。
经测试，tap 方法的响应时间明显快于 onclick 事件，那么我们可以用 click 事件来处理 tap 事件的相应。示例代码参考如下：
<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><!-- /header -->
<div data-role='content'>
<div id="article" class="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 处理。
jquery mobile 对手势触控提供了如下几个事件监听:的更多相关文章
- ExtJs内的datefield控件选择日期过后的事件监听select
[摘要]: 选择时间过后我们为什么需要监听事件?一般有这样一种情况,那就是用于比较两个时间大小或者需要判断在哪个时间点上需要做什么样的操作.基于这样的种种情况,我们很有必要琢磨一下datefield控 ...
- Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作
<div id="divId" class="divTable"> <div class="tableBody"> ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- jQuery中四种事件监听的区别
原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...
- 从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250=&q ...
- jQuery中的事件监听小记
一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...
- android CheckBox控件的定义及事件监听
http://www.beijibear.com/index.php?aid=336 android CheckBox控件的定义及事件监听,本例实现CheckBox控件的定义及点击事件的监听并显示结果 ...
- jQuery EasyUI/TopJUI输入框事件监听
jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...
随机推荐
- USACO Palindromic Squares 【STL__string_的应用】
这里有个讲解 string 用法非常详细的博文:https://www.byvoid.com/zhs/blog/cpp-string 题目意思很简单啦,就是找回文 使用string可以高速A过 Sou ...
- php language construct 语言构造器
isset和empty看起来像是函数,我们也经常把它当作函数一样使用,但是实际上,它们是语言构造器. php中的语言构造器就相当于C中的预定义宏的意思,它属于php语言内部定义的关键词,不可以被修改, ...
- 一步一步重写 CodeIgniter 框架 (8) —— 视图的嵌套输出与返回
视图函数在控制器中通过 $this->load-view() 来调用,从而输出 html,有时候为了调试或附加处理的需要,我们需要打印出这些输出,而不是直接通过浏览器输出,这在 php 中是通过 ...
- 菜鸟学习SSH（二）——Struts国际化
国际化(internationalization,i18n)和本地化(localization,l10n)指让产品(出版物,软件,硬件等)能够适应非本地环境,特别是其他的语言和文化.程序在不修改内部代 ...
- pyfits 读取bintable
import pyfits as pf import numpy as np import math import pandas as pd import matplotlib.pyplot as p ...
- python package的概念
主目录下面文件夹pack,可以按照 import pack.mo as mo 来调用模块,意为把pack文件夹当作一个包
- 01-Foundation简介、NSObject、copy、NSString
目录: 一.Foundation常用类 二.Foundation简介 三.NSObject 四.NSString 回到顶部 一.Foundation常用类 1 NSObject.NSString.NS ...
- null的小扩展
注意:JavaScript有6种数据类型,其中是五种基本数据类型,分别是:Undefined.Null.Boolean.Number 和String,还有一种复杂的数据类型Object 使用typeo ...
- Android Studio安装教程
Google在2013 I/O大会上发布Android Studio之后,广大Android开发者欢欣鼓舞,不过很快就有人出现问题,Android Studio无法安装,或者安装后无法启动,这篇文章就 ...
- Windows Azure 社区新闻综述（#78 版）
欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话.以下是本周的亮点. 博客文章: 博客:Windows Azure BizTalk 服务:如何开 ...