拖拽过程中进入子元素会触发dragleave事件 - 解决办法

本文参考链接 https://www.jianshu.com/p/f96b754032a1

与上篇文章作者同样的需求，鼠标拖动文件进入元素的时候，元素样式要做出相应的改变。

本以为是个简单的操作，分分钟搞定，结果写完发现拖拽的时候的改变一直闪动，触发的dragenter事件中总是夹着dragleave。

原因是，鼠标进入事件监听的子元素的时候，会先触发dragleave事件。

我用的 vue，

当鼠标进入父元素时，添加类名，在此类名下重写它的所有子元素样式，全部添加穿透属性（不懂穿透属性的小伙伴自行查找）

当鼠标离开时，移除类名。

上面是说原理，下面上代码：

父元素：

:class="{'forbidden-childe-pointer-events': forbiddenChildePointerEvents}"

监听dragenter和dragover的处理事件：

    onDrag(ev) {this.forbiddenChildePointerEvents = true;},

监听drop和dragleave事件的处理事件：

    onDragLeave(ev) {this.forbiddenChildePointerEvents = false;},

scss部分：

    .content {&.forbidden-childe-pointer-events * {pointer-events: none;}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！