pointer 事件的坑

强子 - 2021-09-30 08:53:10

我们在做页面元素拖动功能的时候会考虑到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>

特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。

上一篇： js工具库级j4tools（三）

下一篇：横向滚动的flex布局最右侧margin-right 失效