旗下品牌:
石家庄网站开发 石家庄网站开发公司

资讯动态

察而思、思而行、行而后语、知行合一

移动端touch事件解决方案

发布时间:2018-01-24 热度:

  相信对于很多手机用户而言,当手指不小心放在移动设备的屏幕上,不经意间滑动会触发的touch事件是经常出现的。有很多人对这种现象会很反感,今天尚武科技的网站开发工程师则针对这个现象,凭借多年的经验,为大家详细的讲解一下这个现象的出现原因,及有效的解决办法,帮助大家更好的了解这些问题,解决这些问题。
  
  以下支持webkit

石家庄网站开发,网站建设,手机网站开发

  再比如我们常见的taret而言,

石家庄网站开发,网站建设,手机网站开发


  
  以下支持winphone 8
  
  MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
  
  MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动
  
  MSPointerUp——当手指离开屏幕时触发
  
  移动端click屏幕产生200-300 ms的延迟响应
  
  移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。
  
  以下是历史原因,来源一个公司内一个同事的分享:
  
  2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态。
  
  双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例,可能这个简单的举动对于更多的使用者而言,并没有什么只是简单便捷了一些,但是对于
网站开发人员,尤其是多年从事手机网站开发的人来说却是一件翻天覆地的变化。
  
  原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接<a href=”#”></a>,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接的处理,如果t时间里用户进行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢?在IOS safari下,大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。


  石家庄网站开发,网站建设,手机网站开发 


  以上就是尚武科技的网站开发工程师为大家整理的关于移动端touch事件如何区分webkit与winponhe的相关介绍,以上都是尚武科技开发人员的经验之谈,希望可以在日后的网站开发中可以帮助到大家,为大家的网站建设有所帮助。

联系尚武科技
客户服务
石家庄APP开发
400-666-4864
为您提供售前购买咨询、解决方案推荐等1V1服务!
技术支持及售后
石家庄APP开发公司
0311-66682288
为您提供从产品到服务的全面技术支持 !
客户服务
石家庄小程序开发
石家庄小程序开发公司
加我企业微信
为您提供售前购买咨询、
解决方案推荐等1V1服务!
石家庄网站建设公司
咨询相关问题或预约面谈,可以通过以下方式与我们联系。
石家庄网站制作
在线联系:
石家庄Web开发
石家庄软件开发
石家庄软件开发公司
ADD/地址:
河北·石家庄
新华区西三庄大街86号河北互联网大厦B座二层
Copyright © 2008-2025尚武科技 保留所有权利。 冀ICP备12011207号-2 石家庄网站开发冀公网安备 13010502001294号《互联网平台公约协议》
Copyright © 2025 www.sw-tech.cn, Inc. All rights reserved