美文网首页
关于event的一些概念

关于event的一些概念

作者: 5df463a52098 | 来源:发表于2017-08-28 15:39 被阅读21次
var touch = event.targetTouches[0];
        disX = touch.clientX - block.offsetLeft,disY = touch.clientY - block.offsetTop;
//disX是触摸点距离触摸对象左侧的距离,disY是触摸点距离触摸对象顶部的距离

【一】概念
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性:

  1. 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。
  2. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,为第二个手指的触摸点,因为第二个手指是引发事件的原因
  3. 用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值
  4. 手指滑动时,三个值都会发生变化
  5. 一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。
  6. 手指都离开屏幕之后,touches和targetTouches中将不会再有值changedTouches还会有一个值,此值为最后一个离开屏幕的手指的接触点。
    【二】 触点坐标选取
    touchstart和touchmove使用: e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX
    touchend使用: e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX
    【三】touchmove事件对象的获取
    想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数
    touchmove:function(e,参数一){
      var e=arguments[0]
      e.preventDefault()
    }
    【四】关于event的一些坐标
    1.event.clientX、event.clientY
    鼠标相对于[浏览器]窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
    2.event.pageX、event.pageY
    鼠标相对于文档坐标的X,Y坐标这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
    3.event.offsetX、event.offsetY
    鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
    4.event.screenX、event.screenY
    鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
    【五】移动端的一些问题
    1.移动端拖拽时出现卡顿:解决方法是在touchmove事件里加上禁止默认事件event.preventDefalut().

相关文章

网友评论

      本文标题:关于event的一些概念

      本文链接:https://www.haomeiwen.com/subject/fnoudxtx.html