关于节点元素dragenter dragleave频繁触发的问题

DyuanH

已于 2022-02-18 11:52:29 修改

阅读量1.9k

点赞数 1

分类专栏： 2022 文章标签：前端

于 2022-02-18 11:50:58 首次发布

本文链接：https://blog.youkuaiyun.com/DyuanH/article/details/123000192

版权

2022 专栏收录该内容

13 篇文章

订阅专栏

这篇博客探讨了如何在JavaScript中正确处理dragenter和dragleave事件，确保它们的触发次数相等，并介绍了如何判断currentTarget和relatedTarget以确定元素是否离开。通过示例代码，展示了如何在拖放操作中实现精准的节点状态跟踪。

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

解决
1、计数 dragenter和dragleave最终触发次数是相等的
2、判断currentTarget和relatedTarget

const onDragenterProduct = (index: number, e: any) => {
  dragenterProductIndex.value = index
}
const onDragleaveProduct = (e: any) => {
  // 如果当前的节点不包含上个节点就是离开
  if (!e.currentTarget.contains(e.relatedTarget)) {
    dragenterProductIndex.value = -1
  }
}