WINDOWS系统下触屏设备网页实现滚动的touch事件处理

jhhfft 发布于2019-08-19 18:15 / 2957人阅读

摘要：公司有触控屏设备采用系统，普通网页打开后触屏操控如滑动网页没有效果，需在网页代码中添加处理事件网页的手势滑动效果。所以在调用事件时，要注意禁止缩放和滚动。其他地方基本与鼠标事件是一致的。

公司有触控屏设备采用WIN7系统，普通网页打开后触屏操控如滑动网页没有效果，需在网页代码中添加JS处理touch事件网页的手势滑动效果。当然首先需要webkit内核支持touch事件。

以下内容引用http://www.cnblogs.com/zourong/p/3913446.html
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素

注意：
手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。
1.禁止缩放
通过meta元标签来设置。

2.禁止滚动
preventDefault是阻止默认行为，touch事件的默认行为就是滚动。
event.preventDefault();

以下引用自http://blog.csdn.net/jiangcs520/article/details/17564065

很多博文中称touch的三个事件都有targetTouches，touches以及changedTouches对象列表，其实不然，touchend事件中应该是只有个changedTouches触摸实例列表的，而且这里说明一下，回调函数的event只是一个普通的object对象，实际上event中有一个originalEvent属性，这才是真正的touch事件，这个事件中才存在着上诉三个触摸实例列表，这三个实例存储了触摸事件的位置等等属性，类似于鼠标事件。其他地方基本与鼠标事件是一致的。简单介绍一下这三个触摸列表，touches是在屏幕上的所有手指列表，targetTouches是当前DOM上的手指列表，所以当手指移开触发touchend事件时，event.originalEvent是没有这个targetTouches列表的，而changedTouches列表是涉及当前事件的列表，例如touchend事件中，手指移开。

根据以上2篇文章处理网页，对body进行pageY轴计算滑动距离，进行页面滚动；
在touchend事件中使用originalEvent.changedTouches[0].target属性判断链接目标进行点击。

云服务器 GPU云服务器下触屏 touch事件 java滚动条的事件 jquery的事件处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79369.html

JS移动客户端--触屏滑动事件及js手机拖拽效果

摘要：移动端触屏滑动的效果其实就是图片轮播，在的页面上很好实现，绑定和等事件来完成。处理事件能跟踪到屏幕滑动的每根手指。禁止滚动是阻止默认行为，事件的默认行为就是滚动。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到...

joyqi 2019-08-20 15:19 评论0 收藏0
jquery插件Nicescroll 3(非常类似IOS原生的滚动条) （转）

摘要：使用了很多的滚动条插件，如这次说说，支持水平滚动条，支持文本区和文档页面滚动条。，兼容所有的桌面浏览器。，兼容移动设备黑莓手机和芒果。，兼容所有触摸设备平板电脑窗口接口。，简单的安装和激活不破坏代码。使用了很多的滚动条插件，如Iscroll,swiper,这次说说Nicescroll 1，支持水平滚动条! 2，支持div,IFrames,文本区和文档页面滚动条。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 评论0 收藏0
第六天移动端Web开发注意事项

摘要：随着移动互联网的发展，移动已经逐渐成为互联网的主要入口，随之而来的是前端在移动开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动开发需要注意的事项进行一下总结，必然不可能涉及方方面面，但会随着笔者的积累持续更新。随着移动互联网的发展，移动Web已经逐渐成为互联网的主要入口，随之而来的是前端在移动Web开发上面临的各种机遇与挑战，本文就一些常见移动端问题对移动Web开发需要注意...

妤锋シ 2019-08-30 13:09 评论0 收藏0