移动端监控用户触屏

5 篇文章 0 订阅

最近有个需求要用js监控移动端的用户触屏操作,就查了一下,常用的有三个函数,这里记录一下
其中还有一些参数需要提前了解一下

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表,尽量使用这个代替touches

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

clientX / clientY:      //触摸点相对浏览器窗口的位置

pageX / pageY:       //触摸点相对于页面的位置

screenX  /  screenY:    //触摸点相对于屏幕的位置

identifier:        //touch对象的ID

target:       //当前的DOM元素

1.touchstart: //手指触屏开始的函数
案例:

$(window).on('touchstart', function(event) {
          // alert(666);
	var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
  startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
  isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
  this.slider.addEventListener('touchmove',this,false);
  this.slider.addEventListener('touchend',this,false);
        });

我只用到了第一个函数,但其他函数以后也可能用到,这里记录一下
2. touchmove: //手指在屏幕上滑动式触发

3.touchend: //手指离开屏幕时触发

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值