移动端触摸事件(touchstart,touchend,touchmove)的使用!

touchstart 开始触摸 touchmove 移动时触 touchmove 结束时触发

触摸事件有三个属性对象,

touches对象 :表示当前触摸的手指个数,此对象中还包括集合

clientX:clientY: 距离距离浏览器内容左上角的距离,
screenX: screenY: 距离电脑窗口的距离
pageX:pageY: 当前页面的距离包括滚动条距离

changedTouches 记录发生改变的触摸点集合
targetTouches 没有离开的触摸点集合

示例

            let x, y,x1,y1;document.addEventListener('touchstart', function (e) { //开始触摸事件if (e.touches.length === 1) { //触摸手指个数x = e.touches[0].clientX;y = e.touches[0].clientY;}});document.addEventListener('touchend',function (e) { //结束触摸if(e.changedTouches.length === 1){x1 = e.changedTouches[0].clientX;y1 = e.changedTouches[0].clientY;}let r = Math.abs(y1-y)>Math.abs(x1-x);if(r){if(y1-y>60){console.log('向下滑')}else if(y1-y<-60&&y1-y<0){console.log('向上滑')}}})```

移动端触摸事件(touchstart,touchend,touchmove)的使用!相关推荐

HTML5触摸事件(touchstart、touchmove和touchend)
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
移动端touch事件 touchstart、touchmove、touchend
移动端touch事件 touchstart.touchmove.touchend touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发.touchmove事件:当手指 ...
触摸事件 touchstart、touchmove、touchend
转载:https://blog.csdn.net/wangmx1993328/article/details/83270166 触摸事件 HTML5 中, PC 端基于鼠标的界面互动主要是单击, 移动 ...
触摸事件(touchstart、touchmove和touchend)
触摸事件(touch)会在用户手指放在屏幕上面的时候.在屏幕上滑动的时候或者是从屏幕上移开的时候出发.下面具体说明: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会 ...
移动互联网终端的touch事件,touchstart, touchend, touchmove
前言如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通 ...
html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
前言如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移动设备通 ...
h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
移动端触摸事件touchmove的坑
转载地址:http://www.mizuiren.com/452.html 一说到移动端触摸事件,大家的反应不就是touchstart,touchmove,touchend吗,相当于pc段的mouse ...
vue 移动端触摸事件
原文链接: vue 移动端触摸事件上一篇: vue 一次失败的dom游戏制作下一篇: grid 布局模拟游戏面板实现一个可以拖动的小球点击时小球会移动到点击的位置触摸移动时小球会跟着移动 ...

移动端触摸事件(touchstart,touchend,touchmove)的使用!

移动端触摸事件(touchstart,touchend,touchmove)的使用!相关推荐

最新文章

热门文章