h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件

touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。

touchmove: //在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。

touchend: //从屏幕上移开时触发。

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表。

touches：//表示当前跟踪的触摸操作的touch对象的数组。

当一个手指在触屏上时，event.touches.length=1,

当两个手指在触屏上时，event.touches.length=2，以此类推。

targetTouches：//特定于事件目标的touch对象数组。因为touch事件是会冒泡的，所以利用这个属性指出目标对象。

changedTouches：//表示自上次触摸以来发生了什么改变的touch对象的数组。

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX：//触摸目标在视口中的x坐标。

clientY：//触摸目标在视口中的y坐标。

identifier：//标识触摸的唯一ID。

pageX：//触摸目标在页面中的x坐标。

pageY：//触摸目标在页面中的y坐标。

screenX：//触摸目标在屏幕中的x坐标。

screenY：//触摸目标在屏幕中的y坐标。

target：//触摸的DOM节点目标。

注意事项：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

加上这句代码后，我们编写的页面将不会随着用的手势而放大缩小。

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。

这里写的demo的使用的方法是将HTML结构写好后往里传参就可以了。它接受所有滑动页面对象(在这里是document.querySelector('#pages') ) 和要设定的方向(用X,Y表示横向或者纵向)以及一个可选的扩展函数。

纵向滑屏案例：

这里将所有的代码都封装进一个PageSlide的原型对象中，可以当成原生JS插件来使用，

它所要求的HTML的结构为：

page1

h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件相关推荐

H5案例分享：移动端滑屏 touch事件
移动端滑屏 touch事件移动端触屏滑动的效果的效果在电子设备上已经被应用的越来越广泛,类似于PC端的图片轮播,但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...
h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
h5滚动时侧滑出现_iH5中级教程：微场景H5必备，滑动时间轴+轨迹
重点控件:滑动时间轴.轨迹知识点: 1. 点击工具栏上的滑动时间轴工具,在舞台上画出一个框作为滑动区域,添加滑动时间轴.选中滑动时间轴,点击图片工具,添加素材.选中素材,点击轨迹工具,添加轨迹,点击 ...
demo h5 touch 移动_H5案例分享：移动端touch事件判断滑屏手势的方向
移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标 ...
ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
python与h5结合实例_H5案例分享：CSS3动效实例篇一
CSS3动效实例篇一全国很多地方都开始飘起了雪花,大家注意保暖啊~北京这几天虽是艳阳高照,但堵车从未因天气而变过,然并卵~小五依然坐在窗前码代码中~~~嘿嘿······小文艺了一把,废话不多说了,快 ...
linux SPI通信超时,提高SPI时钟时通信异常的案例分享
有人采用STM32H743ZI芯片的SPI外设跟ADC器件通信,发现一旦SPI的SCK时钟超过25MHz时,比如50Mhz,就会发生读取数据失败,并提示Busy忙信息或ERR错误信息.反正只要串行时钟 ...
（自定义组件）通用- X轴横向：溢出滚动（含代码）- 案例篇
(自定义组件)通用- X轴横向:溢出滚动 (含代码)- 案例篇移动端和pc端通用效果截图: 实例代码: <!DOCTYPE html> <html><head> ...

h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件

h5滚动时侧滑出现_H5案例分享：移动端滑屏 touch事件相关推荐

最新文章

热门文章