鼠标拖拽问题，不选中文本&不触发单击事件

柔光的暖阳◎ 2024-02-17 09:53 25阅读 0赞

#### 文章目录 ####

*  1. 为什么鼠标单击的时候触发了\`mousemove\`事件？明明鼠标没有移动
 *  2. 鼠标拖拽元素怎么能不触发单击事件？怎么处理鼠标在元素内的相对定位，而不是每次定位到左上角？
 *   *  方式一：拖拽的元素没有注册click监听就不会触发单击事件绑定的函数
     *  方式二：通过鼠标是否发生移动判断当前元素是需要移动还是需要单击
     *  方式三：考虑鼠标在元素内相对定位问题，鼠标点击位置就是拖拽位置
 *  3. 鼠标拖拽元素怎么能不触发选中文本？
 *   *  方式一：鼠标按下时，阻止默认事件\`e.preventDefault()\`，不触发选中文本
     *  方式二：鼠标按下时，修改当前元素style样式，鼠标抬起再取消
 *  参考链接

鼠标拖拽需要注意什么问题？  
鼠标拖拽会依次触发`mousedown` `mousemove` `mouseup` `click`事件。很多时候在一个元素**既需要拖拽**，**又需要单击**的时候，应该怎么避免在拖拽时不触发单击事件？不触发文本选中问题？

## 1. 为什么鼠标单击的时候触发了`mousemove`事件？明明鼠标没有移动 ##

？

## 2. 鼠标拖拽元素怎么能不触发单击事件？怎么处理鼠标在元素内的相对定位，而不是每次定位到左上角？ ##

### 方式一：拖拽的元素没有注册click监听就不会触发单击事件绑定的函数 ###

1.  示例代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>测试拖拽</title>
        <style>
            body{
        
                background-color: #f5f5f5;
            }
    
            #triggerDiv {
        
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                text-align: center;
                line-height: 100px;
                vertical-align: middle;
                cursor: pointer;
                border-radius: 50%;
            }
    
        </style>
    </head>
    <body>
        <div id="triggerDiv">
            拖拽
        </div>
    </body>
    
    <script>
        
        let triggerELe = document.getElementById('triggerDiv')
        let isMouseDown = false
    
        // 鼠标按下
        triggerELe.addEventListener('mousedown', function(e) {
        
            isMouseDown = true
            console.log('mousedown:', isMouseDown)
        })
    
        // 鼠标移动
        triggerELe.addEventListener('mousemove', function(e) {
        
            console.log('mousemove:', isMouseDown)
            if (isMouseDown) {
        
                triggerELe.style.left = e.clientX + 'px'
                triggerELe.style.top = e.clientY + 'px'
            }
        })
    
        // 鼠标抬起
        triggerELe.addEventListener('mouseup', function(e) {
        
            isMouseDown = false
            console.log('mouseup:', isMouseDown)
        })
    
        // 鼠标离开：事件顺序 mouseout > mouseleave
        // triggerELe.addEventListener('mouseout', function(e) {
        
        //     isMouseDown = false
        //     console.log('mouseout:', isMouseDown)
        // })
    
        // triggerELe.addEventListener('mouseleave', function(e) {
        
        //     isMouseDown = false
        //     console.log('mouseleave:', isMouseDown)
        // })
    
        // 给元素绑定了单击事件
        // triggerELe.addEventListener('click', function(e) {
        
        //     console.log('click')
        // })
    </script>
    </html>

1.  通过对比是否绑定单击事件，判断单击是否被触发

![image.png][]![image.png][image.png 1]

### 方式二：通过鼠标是否发生移动判断当前元素是需要移动还是需要单击 ###

1.  如果`mousemove`事件没有被触发，那`mouseup`发生时当前元素应该执行单击事件
    
    1.  示例代码

1.  通过判断是否触发`mousemove`事件，决定是否执行单击事件

![image.png][image.png 2]

1.  如果`mousedown`和`mouseup`事件发生后，鼠标位置没有改变应该执行单击事件
    
    1.  示例代码

1.  思路：如果鼠标前后坐标没有发生变化执行单击事件

![image.png][image.png 3]  
注！由于页面缩放问题，可能会出现鼠标没有移动但是前后坐标不一致的问题。

### 方式三：考虑鼠标在元素内相对定位问题，鼠标点击位置就是拖拽位置 ###

## 3. 鼠标拖拽元素怎么能不触发选中文本？ ##

### 方式一：鼠标按下时，阻止默认事件`e.preventDefault()`，不触发选中文本 ###

### 方式二：鼠标按下时，修改当前元素style样式，鼠标抬起再取消 ###

## 参考链接 ##

[可拖动DIV层的实现方法\_可拖动的div-CSDN博客][DIV_div-CSDN]  
[Javascript设置拖拽时不触发点击事件\_鼠标拖动列表,会触发列表项的点击事件,如何阻止-CSDN博客][Javascript_-CSDN]

[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/ab8607c3086e4c67a99c293320c2127a.png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/23d1e837faf6078aec6c0ae3f5aa1119.png
[image.png 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/22517b93ae324f5397e833ebceb57380.png
[image.png 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/ca43e354f2ef4f2fb8ac8ce3538ab407.png
[DIV_div-CSDN]: https://blog.csdn.net/twoByte/article/details/73269653
[Javascript_-CSDN]: https://blog.csdn.net/qq_45265059/article/details/119375305