Rumah > hujung hadapan web > tutorial js > jquery mobile的触控点击事件会多次触发问题的解决方法_jquery

jquery mobile的触控点击事件会多次触发问题的解决方法_jquery

WBOY
Lepaskan: 2016-05-16 16:49:26
asal
1685 orang telah melayarinya

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 事件的相应。示例代码参考如下:

复制代码 代码如下:




 
 
 jquery mobile 的 tap 事件多次触发问题-志文工作室
 
 
 




 

  志文工作室
  

志文工作室


   菜单
 

  

  

   

       

  

 


<script><BR> //轻点屏幕<BR> //$('div#article').on("tap",function(event){<BR> $('div#article').on("click",function(event){<BR> event.stopPropagation();<BR> console.log(111111);<BR> if(event.clientY < 80){<BR> //单击了页面上半部分,则向上滑动<BR> if(document.body.scrollTop<1) return;<BR> var scrollPosY = document.body.scrollTop - document.body.clientHeight + 100;<BR> $.mobile.silentScroll(scrollPosY);<BR> }else if(event.clientY > document.body.clientHeight - 80){<BR> var scrollPosY = document.body.scrollTop + document.body.clientHeight - 100;<BR> if(scrollPosY < document.body.scrollHeight){//顶部覆盖的高度+可见高度<网页体高度,则滚动一屏<BR> $.mobile.silentScroll(scrollPosY);<BR> }<BR> }<BR> });<BR> for(var i=1;i<200;i++){<BR> $('#article ol').append('<li>第 '+ i +' 行:志文工作室');<BR> }<BR></script>

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

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan