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

你可能感兴趣的:(拖拽过程中进入子元素会触发dragleave事件 - 解决办法)