关于html:pointer-事件的坑

59次阅读

共计 2248 个字符，预计需要花费 6 分钟才能阅读完成。

咱们在做页面元素拖动性能的时候会思考到 pc 端和挪动端的适配，那么 pc 端咱们用 mousedown，mousemove，mouseup 组合，挪动端会用到 touchstart，touchmove，touchend 组合也能动起来，
如果两端兼容，那么咱们能够同时绑定这两种事件来适配。

1. 会保护两套事件，且事件的 event 对象不一样。
2. 如果存在触摸屏存在多种事件的时候，事件可能反复触发

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>

正文完