拖拽过程中进入子元素会触发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;
      }
    }

 

转载于:https://www.cnblogs.com/yummylucky/p/11417765.html