移动端移动事件监听（touch、默认行为）
 
最近在写一个移动端网页中会遇到滑动事件监测问题，来解决用户在canvas画布中移动效果
 
touchmove.默认触发事件e.preventDefault（）没有生效. 会导致用户在滑动canvas时会出现移出网页
以及在安卓手机下.瞬间滑动会触发三个事件stat->move->end 三者 但是在长按之后会发生一个奇怪的现象,canvas脱屏造成半片区域空白 -->其实也是move中没有阻止默认事件的原因所致的
 
this.mycanvas.ontouchmove（e.preventDefault（））
this.mycanvas.ontouchstart（e.preventDefault（））
this.mycanvas.ontouchend（e.preventDefault（））

 
这是我在先前使用的代码.但是还是会出现默认行为.查阅资料发现是passive ——推断是这东西的问题（伏笔 orz）
 
passive：
 
这东西是什么呢？：
 
前言介绍
 
 
   Passive Event Listeners是什么？ 
 
 
 为什么需要Passive Event Listeners？ 
 
 
 Passive Event Listeners是怎么实现的？
 
 
这里主要回答前两个问题：
 
 
 
Passive Event
 Listeners是Chrome提出的一个新的浏览器特性：Web开发者通过一个新的属性passive来告诉浏览器，当前页面内注册的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive
 Event Listeners特性当前仅支持mousewheel/touch相关事件。 Passive Event
 Listeners特性是为了提高页面的滑动流畅度而设计的，页面滑动流畅度的提升，直接影响到用户对这个页面最直观的感受。这个不难理解，想象一下你想要滑动某个页面浏览内容，当你用鼠标滚轮或者用手指触摸屏幕上下滑动的时候，页面并没有按你的预期进行滚动，此时你内心往往会感觉到一丝不爽，甚至想放弃该页面。Facebook之前做了一项试验，他们将页面滑动的响应刷新率从60FPS降低到30FPS的时候，发现用户的参与度急速下降。
 
 
由前面对Passive Event Listeners特性的介绍可知，Passive Event
 Listenrers特性是让Web开发者来告诉浏览器，当前页面内注册的mousewheel/touch事件监听器是否属于被动监听器，以便让浏览器更好地做决策来提高页面的滑动流畅度。那么Chrome浏览器为什么需要知道是否被动监听器这个信息呢？浏览器知道这个信息之后，它要做什么决策呢？要回答这个问题，有必要先了解一下目前Chrome浏览器的线程化渲染框架，它是Passive
 Event Listeners特性的基础。
 
 
在介绍Chrome浏览器的线程化渲染框架之前，我们先来简单了解本文涉及到的Chrome浏览器的一些概念。
 
 
绘制（Paint）：将绘制操作转换成为图像的过程（比如软件模式下经过光栅化生成位图，硬件模式下经过光栅化生成纹理）。在Chrome中，绘制分为两部分实现：绘制操作记录部分（main-thread
 side）和绘制实现部分（impl-side）。绘制记录部分将绘制操作记录到SKPicture中，绘制实现部分负责将SKPicture进行光栅化转成图像；
 图层（Paint
 Layer）：在Chrome中，页面的绘制是分层绘制的，页面内容变化的时候，浏览器仅需要重新绘制内容变化的图层，没有变化的图层不需要重新绘制；
 合成（Composite）：将绘制好的图层图像混合在一起生成一张最终的图像显示在屏幕上的过程；
 渲染（Render）：可以简单认为渲染等价于绘制+合成； UI线程（UI
 Thread）：浏览器的主线程，负责接收到系统派发给浏览器窗口的事件、资源下载等； 内核线程（Main/Render
 Thread）：Blink内核及V8引擎运行的线程，如DOM树构建、元素布局、绘制（main-thread
 side）、JavaScript执行等逻辑在该线程中执行； 合成线程（Compositor
 Thread）：负责图像合成的线程，如绘制（impl-side），合成等逻辑在该线程中执行。
 OK，了解完上面的几个概念后，我们正式开始Chrome线程渲染框架的介绍。
 
 
 
前文铺垫是很有必要的.这里我也简单总结一下
 
为了性能优化的问题choreme工程师在数据里发现81%的开发者在处理touchmove事件时是不会阻止其默认行为的
passive的出现就是为了解决方便开发者以及浏览器的监听功能
chrome主要是用了两个线程：
内核线程：来解决dom树 js逻辑 css逻辑
合成线程 ：图层绘制实现部分（impl-side）、图层图像合成则是交给合成线程负责处理。这种多线程负责页面内容的渲染框架，在Chrome中称为线程化渲染框架（Threaded Compositor Architecture）。
 从前的单线程渲染框架存在两个明显的问题：
 **1. 流水线的执行方式，后面的工作必须等待前面工作执行完成才能处理，无法将相互独立的工作并行处理；
 
内核线程负责的工作太多且耗时，一旦遇上内核在执行耗时较长的工作，用户的输入事件将无法立即得到响应。**
 
 
 
对于第1个问题，浏览器很难控制页面从内容变化到布局渲染整个过程的耗时（即新生成一帧内容的耗时），中间任何一项工作的执行都可能导致整体过程耗时变大，过大的耗时会导致页面内容的刷新率偏低，从而形成视觉上的卡顿。如浏览器收到VSync中断信号通知的时候，意味着页面需要立即对内容进行渲染，但这个时候内核线程可能还在执行一些业务的JavaScript代码，导致页面内容的渲染无法立即开始，如果页面无法在下一个VSync中断信号到来之前完成对内容的渲染，则页面会出现丢帧，即视觉体验上的卡顿。
 对于第2个问题，由于内核线程负责的工作太多，这将导致内核线程经常处于忙碌状态，无法快速处理外界的输入消息，表现为用户操作了页面，但是无法立即得到响应。
 
 
 
 
为了优化第1个问题，Chrome浏览器对内核线程负责的工作进行拆分，通过多线程并发处理提高渲染效率减少丢帧，如内核线程仅负责DOM树构建、元素的布局、图层绘制记录部分（main-thread
 side）、JavaScript的执行，而图层绘制实现部分（impl-side）、图层图像合成则是交给合成线程负责处理。这种多线程负责页面内容的渲染框架，在Chrome中称为线程化渲染框架（Threaded
 Compositor Architecture）。
 
 Chrome中，这类可以不经过内核线程就能快速处理的输入事件为手势输入事件（滑动、捏合），手势输入事件是由用户连续的普通输入事件组合产生，如连续的mousewheel/touchmove事件可能会生成GestureScrollBegin/GestureScrollUpdate等手势事件。手势输入事件可以直接在已经渲染好的内容快照上操作，如滑动手势事件，直接对页面已经渲染好的内容快照进行滑动展示即可。由于线程化渲染框架的支持，手势输入事件可以不经过内核线程，直接由合成线程在内容快照上直接处理，所以即使此时内核线程在忙碌，用户的手势输入事件也可以马上得到响应。大家可以搞一个简单的demo验证一下Chrome浏览器的这个特性：如在一个有滚动条的页面内通过JavaScript执行一段死循环的代码(while-true之类的)，这个时候再去尝试上下滑动页面，你会发现此时页面仍能流畅地滑动。
 
 
为了解决这个问题,让浏览器可以瞬间执行不必要进去 内核线程（css、html、js）而直接进入到合成线程,passive（顺从者）应运而生
 
在这里贴一个链接：浏览器passive详情
 现在对于touchmove无法处理e.preveDefault（）找到了解决措施.
 现在将我的代码换成
 
this.myCanvas.addEventListener（‘touchmove/start/end’,function（e）{
e....
}，{
passive：false
}）```


//这样我的浏览器就不会默认为  -> 我监听的touchmove事件没有阻止默认行为的事件了 

 
没曾想.一坑接着一坑来
 
还是会出现canvas闪出屏幕的问题.这次是**长按住 再滑动** 
~~fuck~~ 
 
第一反应是在长按时 又触发了其它监听事件,导致其他默认事件生成导致的问题
 那么…
 接着查询资料：移动端触发的点击事件集合
 大体总结：其实有时会触发到3个事件
 
touch
tap
swiper
 
那现在我想知道,在长按过程中：总共出现了哪些事件呢
 
addEvent(elem, type, showAll) {
      type = type.split(' ')

      type.forEach(function (item) {
        elem.addEventListener(item, function (ev) {
          console.log(showAll ? ev : ev.type)
        })
      })
    },//编写测验函数
 
之后在我的canvas中绑定上监测测验函数,看看到底是输出了哪个值就可以了
 
_this.addEvent(
        this.myCanvas,
        'tap click touchstart touchmove touchend touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap',
        false
      )
 
结果费解的是
 
 仍是只有touch事件被触发（脑回路停电三分钟）
 接着我想到一个问题：
 touchstart->touchmove->touchend
 执行过程中：
 
start开始之后像move触发可以移动的flag
flag=true之后,才会进入到move事件中
move在不断的刷新移动.执行n次
执行完毕后 用户手势抬起 触发end事件 将flag=false
 
所以根本原因就是我阻止了start的默认行为
 那么我为什么当初要阻止start的默认行为？
 ： 为了保险、为了好看、我自己也不知道…
 最后我消除了start的默认行为,end的默认行为,允许他们进行
 毕竟三者就是通过默认行为才进行传递信号的…
 有点乌龙.但是收获很多,值得一提的是,在touch事件中
 单手指滑动,多指滑动也是要进行判断的.
 
event.touches && event.touches.length < 2
 
 
 
event.touches返回的是一个数组,其中记录了屏幕中被点击的个数,可以在数组大小进行判断用户是在点击还是在缩放
 

移动端图片单指移动,双指放大缩小实现//touchmove的时候不让body滚动
 
思路1:移动放大缩小操作都直接放到图片上面
 
 
 
图片的放大缩小使用transform的scale属性操作,移动使用transform的translate属性操作,也可以使用matrix属性做2D转换,这个有六个值,14表示xy轴的放大倍数,56表示xy轴的偏移量,23表示度数,这里不操作旋转可以写成默认的0
根据touches获取当前触摸位置,touches是一个数组,表示当前有几个手指触摸屏幕,可以判断一下,是单指的时候在ontouchstart时记录手指触摸的位置,然后在ontouchmove时计算现在手指的移动位置,计算两者的偏移量,在图片上使用transform属性的matrix或translate控制图片做出移动(可以在ontouchend的时候判断一下要不要移动回原位置,或者在放大一倍的时候就让回原位置,或者在ontouchmove的时候限制一下图片的移动范围)
根据touches有两个值的时候做出判断,让图片根据手势放大缩小.在ontouchstart的时候进行根据两个手指的位置计算出来现在两个手指的距离(勾股定理)记录下来,在ontouchmove的时候计算当前手指的距离,拿这个距离和之前start时记录的距离相除,根据这个值来确定当前放大倍数.然后在图片上面做出操作,控制放大缩小程度.(这里会有个几个坑)
 3.1 因为将放大和移动都放到图片dom上,所以两个属性之间会有一些相互影响,这个需要处理下
 3.2 在放大的时候需要确定放大的中心,这时候有两种确定中心的情况,第一种:在ontouchstart的时候计算双指的中心位置,把这个确定为transform-origin,第二种是在ontouchmove的时候动态计算双指之间的位置在原始图片上的坐标,这里计算复杂一些,需要考虑到图片放大倍数和偏移量,需要通过记录下来的图片位置,和当前放大缩小的倍数计算当前我们看到的展示图片,和原始图片倍数是1,偏移量是0的时候的对应坐标,这里计算好对应的坐标才好计算下一步
 3.3 在确定对应坐标的情况下,因为transform-origin改变在放大倍数不为1的时候会导致图片发生移动,这里需要做一下处理,因为要保证图片在移动的时候不能跳跃式移动,在修改transform-origin的时候我们需要根据当前放大倍数和现在transform-origin-原始transform-origin之间的偏移量来计算这个图片是会上下左右移动多少位置,需要在修改transform-origin的时候同步修改一下translate偏移量,让图片不会因为origin修改而发生位置改变
 3.4 在确定中心之后就只需要通过计算双指之间的距离计算放大缩小倍数了
 ps:这里也可以使用position来确定移动位置,不过同样需要计算
 
 
思路2:因为在scale为1的时候修改transform-origin不会导致图片的偏移,所以可以将放大的操作放到ing的父元素上面,让父元素占满屏幕,让图片只做位置移动
 
 
 
同样的三个方法:ontouchstart/ontouchmove/ontouchend这三个,在单指触摸的时候通过css控制图片dom移动,在放大的时候控制图片父元素放大,这样就可以保证放大的不影响图片,而且不怎么用计算当前放大的中心在哪
和上面相同的需要在start记录位置,然后在move的时候记录移动的大小,计算移动的大小,修改位置
双指放大缩小也是一样
 
 
下面是根据方法二写的例子,在react项目中的,其他项目也可以只要事件能挂上去就可以,怕覆盖原先事件可以使用监听,不过一般有这个事件的都有这个功能了,都不做这些了
 看项目需求
 这里的例子可以去闲鱼里搜闪回有品官方店里面的验货报告里面查看
 
// 在移动端如果想要在touchmove的时候不让body也滚动,在弹窗的最外层阻止事件冒泡就可以了
	const box: any = document.getElementsByClassName('ant-image-preview-wrap')
      box[0].ontouchmove = (e: any) => {
        e.preventDefault()
        e.stopPropagation()
        return false
      }
 
useEffect(() => {
    if (visible) {
      //  这里将触摸事件绑定到图片的父元素上面
      const imgBoxDom: any = document.getElementsByClassName('ant-image-preview-img-wrapper')
      // 记录move前的图片位置,在ontouchesstart和ontouchesmove有使用到
      let dingwei: { x: number; y: number } = { x: 0, y: 0 }
      // 计算双指之间的距离
      const getDistance = (start: { x: number; y: number }, stop: { x: number; y: number }) => {
        return Math.sqrt(Math.pow(stop.x - start.x, 2) + Math.pow(stop.y - start.y, 2))
      }
      const distance = { start: 1, stop: 1 }
      // 默认的放大倍数(即时)
      let scaleXY = 1
      // 默认放大倍数(双指操作结束)
      let scale = 1
      // 图片开始移动位置
      let trans: any
      // 是不是单个手指触摸(判断防止因为在触发双指时,两个手指都移动导致weizhi字段记录的坐标和双指不同时离开屏幕导致有触发单指的情况,这种情况导致的图片位置跳动)
      let isOne = true
      imgBoxDom[0].ontouchstart = (e: any) => {
        e.preventDefault()
        if (e.touches.length == 1) {
          // 是单指触摸,保存一下现在的位置
          isOne = true
          dingwei = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY }
          trans = e.target.style.transform
          if (trans.indexOf('matrix') == 0) {
            trans = trans.split('(')
            trans = trans[1].split(',')
          } else {
            trans = [1, 0, 0, 1, 0, 0]
          }
        } else if (e.touches.length == 2) {
          // 双指就保存一下现在的双指距离
          isOne = false
          distance.start = getDistance(
            {
              x: e.touches[0].screenX,
              y: e.touches[0].screenY,
            },
            {
              x: e.touches[1].screenX,
              y: e.touches[1].screenY,
            }
          )
        }
      }
      imgBoxDom[0].ontouchmove = (e: any) => {
        e.preventDefault()
        e.stopPropagation()
        if (e.touches.length == 1) {
          // 开始移动,防止双指放大之后离开一指导致图片跳动,更新一下图片位置
          if (!isOne) {
            isOne = true
            dingwei = { x: e.changedTouches[0].pageX, y: e.changedTouches[0].pageY }
          }
          // 计算现在的单指移动位置
          const moveX = e.changedTouches[0].pageX - dingwei.x
          const moveY = e.changedTouches[0].pageY - dingwei.y
          // 使用scaleXY是因为有可能父元素已经被放大缩小过,这时候移动的大小就不是显示的大小了,需要计算一下实际距离
          const style = `transform:matrix(1,0,0,1,${parseFloat(trans[4]) + moveX / scaleXY},${
            parseFloat(trans[5]) + moveY / scaleXY
          });transition:transform 0s;`
          e.target.style = style
        } else if (e.touches.length == 2) {
          // 计算一下现在放大倍数
          distance.stop = getDistance(
            {
              x: e.touches[0].screenX,
              y: e.touches[0].screenY,
            },
            {
              x: e.touches[1].screenX,
              y: e.touches[1].screenY,
            }
          )
          const big = distance.stop / distance.start
          // 最大三倍,最小1倍,只需要修改倍数,位移是不需要修改的,不过在放大的时候图片是可以以双指中心为origin放大的,很迷
          scaleXY = big - 1 + scale
          scaleXY = scaleXY < 1 ? 1 : scaleXY
          scaleXY = scaleXY > 3 ? 3 : scaleXY
          const style = `transform:matrix(${scaleXY},0,0,${scaleXY},0,0);transition:transform 0s;`
          imgBoxDom[0].style = style
        }
      }
      imgBoxDom[0].ontouchend = (e: any) => {
        e.preventDefault()
        e.stopPropagation()
        scale = scaleXY
      }
      // 底下这里可以不做判断,这里是因为之前使用的antd的组件,直接在切换图片上面添加一个事件,切换图片让图片大小位置还原
      const btnDomLeft: any = document.getElementsByClassName('ant-image-preview-switch-left')
      const btnDomImg: any = document.getElementsByClassName('ant-image-preview-img')
      btnDomLeft[0].addEventListener('click', () => {
        btnDomImg[0].style = 'transform:matrix(1,0,0,1,0,0);transition:transform 0s;'
        imgBoxDom[0].style = `transform:matrix(1,0,0,1,0,0);transition:transform 0s;`
      })
      const btnDomRight: any = document.getElementsByClassName('ant-image-preview-switch-right')
      btnDomRight[0].addEventListener('click', () => {
        btnDomImg[0].style = 'transform:matrix(1,0,0,1,0,0);transition:transform 0s;'
        imgBoxDom[0].style = `transform:matrix(1,0,0,1,0,0);transition:transform 0s;`
      })
    }
  }, [visible])
 

 
一说到移动端触摸事件，大家的反应不就是touchstart，touchmove，touchend吗，相当于pc段的mousedown，mousemove，mouseup，只要是写过pc端的js的话，若不慎，往往会坑在移动端。
 
比如说最近我就被touchmove坑了好久好久不能自拔。我的意图是在触摸的时候获取触控的位置坐标。当初我是这么写的：
 
var xy=document.getElementById("xy");
 
var endxy=document.getElementById("end_xy");
 
var content=document.getElementById("content");
 
var x,y,end_x,end_y;
 
document.addEventListener("touchstart",function(evt){
 
x=parseInt(touch.pageX),
 
y=parseInt(touch.pageY);
 
end_x=x,
 
end_y=y;
 
xy.innerHTML=x+","+y;
 
content.innerHTML="";
 
},false)
 
document.addEventListener("touchmove",function(evt){
 
end_x=parseInt(touch.pageX),
 
end_y=parseInt(touch.pageY);
 
xy.innerHTML=end_x+","+end_y;
 
},false)
 
document.addEventListener("touchend",function(evt){
 
var x_x=end_x-x;
 
var y_y=end_y-y;
 
endxy.innerHTML=x_x+","+y_y;
 
document.title="x轴移动了"+x_x+" ,y轴移动了"+y_y;
 
if(y_y
 
content.innerHTML="由于你向上滑动了一段距离，所以我要插入内容了";
 
}else{
 
content.innerHTML="";
 
}
 
},false)
 
发现我的手指无论如何移动都不能获取到坐标，或者断断续续而不是连续地取值，造成很多怪异的现象。
 
通过仔细研究发现这里面有两个坑：
 
其一是要想获取触控的属性(坐标)，首先要获取触控的对象，移动端不像PC端只有一个指针，所以要先取一个手指的情况下e.touches[0];
 
其二是触摸时浏览器有个默认的事件，这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷。
 
其三是一定要用addEventListener事件绑定，不可用ontouchmove,ontouchstart,ontouchend。
 
所以正确的触摸事件是这样子的：
 
var xy=document.getElementById("xy");
 
var endxy=document.getElementById("end_xy");
 
var content=document.getElementById("content");
 
var x,y,end_x,end_y;
 
document.addEventListener("touchstart",function(evt){
 
var touch=evt.touches[0];
 
x=parseInt(touch.pageX),
 
y=parseInt(touch.pageY);
 
end_x=x,
 
end_y=y;
 
xy.innerHTML=x+","+y;
 
content.innerHTML="";
 
},false)
 
document.addEventListener("touchmove",function(evt){
 
evt.preventDefault();
 
var touch=evt.touches[0];
 
end_x=parseInt(touch.pageX),
 
end_y=parseInt(touch.pageY);
 
xy.innerHTML=end_x+","+end_y;
 
},false)
 
document.addEventListener("touchend",function(evt){
 
var x_x=end_x-x;
 
var y_y=end_y-y;
 
endxy.innerHTML=x_x+","+y_y;
 
document.title="x轴移动了"+x_x+" ,y轴移动了"+y_y;
 
if(y_y
 
content.innerHTML="由于你向上滑动了一段距离，所以我要插入内容了";
 
}else{
 
content.innerHTML="";
 
}
 
},false)
 
如此便能很顺滑的持续获取手指的位置坐标。

touchmove事件详释
 
用这个代码测试
 
<style>
	*{
	padding:0;
	margin:0;
	}
	div{
	height:100px;
	width:100px;
	background:liner-gradient(to right,red,blue);
	}
</style>
<body>
<div>1</div>
<div>2</div>
</body>
 
var div=document.querySelector('div');
//开始触摸
div.addEventListener('touchstart',function(e){
	console,log(e.touches);
});
 
1,记录手指的起始位置–坐标
 2.记录手指离开屏幕时的坐标值–记录手指在滑动过程中的坐标值
 3.计算两个记录的手指坐标的差异
 4.让dom元素也进行相应数值的偏移
 
touches： 是指当前屏幕所有的手指对象
 targetTouches： 当前元素上的手指对象
 changedTouches: 当前屏幕上变换的手指对象–从无到有，从有到无
 
*targetTouches与touches在测试中没有区别
 
手指对象的坐标
 
screenX/screenY:是手指的触摸点相对于屏幕左上角的坐标距离
 clientX/clientY:相对于当前视口–移动端屏幕
 pageX/pageY:相对于当前页面的内容–会有滚动条–包含滚动的
 
//拖拽操作--drag

var div=document.querySelector('div');
var startX,startY,moveX,moveY,distanceX,distanceY;
//开始触摸
//如果把div换成document事件，那么就能自动捕获到当前响应事件的对象，用的是e.target属性

div.addEventListener('touchstart',function(e){
	startX=e.targetTouches[0].clientX;
	startY=e.targetTouches[0].clientY;
});
//触摸滑动~持续
div.addEventListener('touchmove',function(e){
//记录手指滑动过程的坐标值
moveX=e.targetTouches[0].moveX;
moveY=e.targetTouches[0].moveY;
//计算与上一次坐标的差异
distanceX=moveX-startX;
distanceY=moveY-startY;
//设置偏移
//如果把div换成document事件，这里的div要换成e.target
div.style.transform='translate('+distanceX+'px',"+distanceY+'px')';
});
//触摸结束
div.addEventListener('touchend',function(e){
})