咱们在做页面元素拖动性能的时候会思考到pc端和挪动端的适配，那么pc端咱们用mousedown，mousemove，mouseup组合，挪动端会用到touchstart，touchmove，touchend组合也能动起来，
如果两端兼容，那么咱们能够同时绑定这两种事件来适配。
存在的问题：
1.会保护两套事件，且事件的event对象不一样。
2.如果存在触摸屏存在多种事件的时候，事件可能反复触发
那么还有一个抉择： pointer事件
pointer事件有pointerdown，pointermove，pointerup事件等等（还有别的）；同样pointer
事件的event对象pc端和挪动端也是不一样的，也是须要解决一下的。
pointer事件能兼容挪动端和pc端，这样就能只绑定一种事件了。
留神
1.当咱们想挪动一个元素时，咱们要把该元素css款式设置为touch-action：none，不然，pointermove事件会触发3次左右就主动勾销了，前面不执行了，也不会报错。
2.在元素从pointerdown事件到move，还得是原来的元素，你、不能被替换，当初的双向绑定框架会更新dom，挪动过程中该元素就不是原来的元素了。
代码
测试代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Document</title> <style> * { margin: 0; } html { height: 100%; } body { height: 100%; overflow: hidden; } div { border: 1px solid; padding: 20px; } #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } #content { position: relative; height: 200px; width: 100%; background-color: bisque; } #pointer { position: absolute; height: 50px; width: 50px; left: 0; top: 0; background-color: blue; touch-action: none; } </style> </head> <body> <div id="content"> <div id="pointer"></div> </div> <script type="text/javascript"> let pointer = document.querySelector('#pointer') const content = document.querySelector('#content') let startLeft = 0 let startTop = 0 pointer.addEventListener('pointerdown', function (ev) { console.log('down', ev.x, ev.y, ev.isPrimary) startLeft = ev.x startTop = ev.y document.body.addEventListener('pointermove', mousemove) document.body.addEventListener('pointerup', mouseup) document.body.addEventListener('pointercancel', mousecancel) content.removeChild(pointer) pointer = document.createElement('div') pointer.id = "pointer" content.appendChild(pointer) }) function mouseup(ev) { // document.body.removeEventListener('touchmove', mousemove) document.body.removeEventListener('pointermove', mousemove) // pointer.style.left = '0px' // pointer.style.top = '0px' document.body.removeEventListener('pointerup', mouseup) document.body.removeEventListener('pointercancel', mousecancel) } function mousemove(ev) { ev.preventDefault(); console.log('move', ev, pointer) // pointer.style.left = ev.x - startLeft + 'px' // pointer.style.top = ev.y - startTop + 'px' } function mousecancel(ev) { console.log('mousecancel', ev) } </script> </body></html>