PC端点击空白处也可以拖拽是不是有问题？

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
 
<body>
    <div id="box"></div>
</body>
<script>
    const box = document.getElementById('box');
    const drag = (ele) => {
        const startPoint = {};
        const movePoint = {};
        const currentPoint = {
            x: 0,
            y: 0
        }
        document.addEventListener('pointerdown', startP, false)
        
        ele.addEventListener('touchstart', (e) => {
            e.preventDefault()
        }, false)
        function startP(e){
            startPoint.x = e.pageX;
            startPoint.y = e.pageY;
            document.addEventListener('pointermove', moveP, false)
            document.addEventListener('pointerup', upP, false)
            document.addEventListener('pointercancel', upP, false)
        }
        function moveP(e){
            movePoint.x = currentPoint.x + e.pageX - startPoint.x;
            movePoint.y = currentPoint.y + e.pageY - startPoint.y;
            ele.style.transform = `translate3d(${movePoint.x}px,${movePoint.y}px,0)`
            e.preventDefault()
        }
        function upP(e){
            currentPoint.x = movePoint.x;
            currentPoint.y = movePoint.y;
            document.removeEventListener('pointermove', moveP, false)
            document.removeEventListener('pointerup', upP, false)
            document.removeEventListener('pointercancel', upP, false)
        }
    }
    drag(box);
</script>
 
</html>

老师你好，点击空白处也可以拖拽，是不是代码哪里错了

慕仙7313728 2022-10-05

源自：移动端事件 3-3 单指拖拽

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2022-10-05 15:36:22

同学你好，监听元素的问题，将按下事件绑定在box元素上，点击空白处就不会拖拽了

祝学习愉快！

收起回答

慕仙7313728 提问者 #1

但是换成box元素PC端下拖拽并不是很理想，因为移出盒子会有问题。

2022-10-05 19:20:31
樱桃小胖子回复提问者慕仙7313728 #2

同学你好，PC端是可以移出盒子的，如下：
另外，由于鼠标指针只能移到浏览器的边缘，因此，如果想要完全将红色方块移出盒子，就要允许鼠标点击空白处可以拖拽，这是一个取舍问题，不是代码有问题。
祝学习愉快！

2022-10-06 11:11:24