| 标题 | jquery mobile的触控点击事件会多次触发问题的解决方法 |
| 内容 | 这篇文章主要介绍了jquery mobile的触控点击事件会多次触发问题的解决方法以及替代方法,需要的朋友可以参考下 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><!-- /header --> <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 处理。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。