所谓dragenter和dragleave的“失效”问题

最新推荐文章于 2025-06-29 12:39:41 发布

原创最新推荐文章于 2025-06-29 12:39:41 发布 · 4.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#drag #drop

JS 专栏收录该内容

24 篇文章

订阅专栏

本文探讨了在实现文件拖拽上传功能时遇到的一个特殊问题：dragenter和dragleave事件在含有子元素的容器上的触发逻辑。通过代码示例展示了如何正确处理这些事件，确保用户体验的一致性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天工作中，遇到了一个奇葩问题，就是有个需求，文件拖拽上传，不过需要文件拖拽到容器当中才显示拖拽上传的范围框，然后离开容器，范围框消失，于是乎，立马去查了mdn，看了下API，然后分分钟写了出来，校验的时候，奇葩的事出现了，在我dragenter的时候不断的触发dragleave,当时我就满脸的黑人问号，好在最终，老天眷顾我，哈哈，被我发现了其中的奥妙，下面，我就举个列子，贴代码，给大家介绍下，为什么会出现这种情况？

首先，我页面架构是这样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            div{
                width: 200px;
                height: 100px;
                background: blue;
            }
            p{
                width: 100px;
                height: 100px;
                background: red;
                margin-left: 10px;
            }
         </style>
</head>
<body>
    <div > 
    </div>
    <script>
        document.querySelector("div").addEventListener("dragleave",function(e){
            console.log('drapleave')
        })
        document.querySelector("div").addEventListener("dragenter",function(e){
            console.log('drapenter')
        })
        document.querySelector("div").addEventListener("dragover",function(e){
            e.preventDefault()//阻止浏览器读取文件
        })
        document.querySelector("div").addEventListener("drop",function(e){
            e.preventDefault()//阻止浏览器读取文件
        })
    </script>
</body>
</html>

然后往div拖拽一个文件进去，然后再移出，这时候，看下打印结果如下：

很正常对吧，移入打印drapenter，移除打印drapleave。再然后这时候，咱们往div里面加个标签，就比如P标签的。

这时候，咱们再移入移出（ps:移到P标签上再移出），看下打印效果：

可以明显看到，打印了两次移入，一次移出，这代表了什么呢？这就代表，如果你绑定事件的容器，包含子节点，那么你的子节点都会触发dragenter，而你的dragleave，触发的是上次移入的那个节点。

那么问题来了，怎么解决呢？

其实很简单，咱们只需要把最后一次移入的节点，记录下来，然后每次触发后，做比较，移入和移除元素相同才触发。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            div{
                width: 200px;
                height: 100px;
                background: blue;
            }
            p{
                width: 100px;
                height: 100px;
                background: red;
                margin-left: 10px;
            }
         </style>
</head>
<body>
    <div > 
        <p></p>
    </div>
    <script>
        let elemetnNode=""//最后一次节点
        document.querySelector("div").addEventListener("dragenter",function(e){
            elemetnNode=e.target;
            console.log('drapenter')
        })
        document.querySelector("div").addEventListener("dragleave",function(e){
            if(elemetnNode===e.target)
            console.log('drapleave')
        })
        document.querySelector("div").addEventListener("dragover",function(e){
            e.preventDefault()//阻止浏览器读取文件
        })
        document.querySelector("div").addEventListener("drop",function(e){
            e.preventDefault()//阻止浏览器读取文件
        })
    </script>
</body>
</html>