拖拽過程中進入子元素會觸發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;
      }
    }