共计 2248 个字符,预计需要花费 6 分钟才能阅读完成。
咱们在做页面元素拖动性能的时候会思考到 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>
正文完