dragenter和dragleave事件

最近遇到一个需求，就是在用户把文件拖住到我们的编辑器时，编辑器样式上需要做出反应，让用户知道拖拽已经进入有效范围，可以松手了。一看，so easy，不就是监听一个dragenter和dragleave事件的问题么，后面做起来才发现还是naive。

还是举例子说明问题吧

<div class="drag-zone"></div>
<script>
    var elm =  $('.drag-zone')
      elm.on('dragenter',function(ev){
          console.log('dragenter');
          elm.addClass('dragging-over');
      });
      elm.on('dragleave',function(ev){
          console.log('dragleave');
          elm.removeClass('dragging-over');
      });
</script>

运行上面这段代码，我们会发现完全符合我们的预期，没有任何的问题。但是我们稍微改下

<div class="drag-zone">
    <!-- 添加一个子元素 -->
    <div class="drag-zone--child"></div> 
</div>
<script>
    var elm =  $('.drag-zone')
      elm.on('dragenter',function(ev){
          console.log('dragenter', ev.target);
          elm.addClass('dragging-over');
      });
      elm.on('dragleave',function(ev){
          console.log('dragleave', ev.target);
          elm.removeClass('dragging-over');
      });
</script>

运行上面这段代码，我们看到如下图的页面

运行的页面，红色是父元素，蓝色是子元素

我们尝试拖拽文件从底部一直移动到顶部，最后移出，看console里的log，发现一脸懵逼，怎么这么多dragenter和dragleave，和想象的完全不一样啊。

image.png

这是什么鬼？我在drag-zone元素上绑定dragenter事件，你为啥触发这么dragleave和dragleave，你这是不按套路出牌啊，瞎搞啊。

google了下，发现确实是有这个问题存在啊dragleave-of-parent-element-fires-when-dragging-over-children-elements，stackoverflow上给出了好几种解决方案。最高票解决方案非常简单，但是副作用明显，子元素所有的pointer-event都被禁止了，不太可取。

静下心来仔细看下log，发现他的触发逻辑还是有规律可循的，它是每进入一个新元素的同时就退出上一个元素，最后一次出界父元素时只有退出事件了，利用这个规律，后面有人提出了这种方案，本人使用下来效果比较好。

    var lastenter = null;
    var elm =  $('.drag-zone')
      elm.on('dragenter',function(ev){
          lastenter = ev.target; // 记录最后进入的元素
          console.log('dragenter', ev.target);
          elm.addClass('dragging-over');
      });
      elm.on('dragleave',function(ev){
          // 如果此时退的元素是最后进入的元素，说明是真正退出了`drag-zone`元素
          if(lastenter === ev.target){ 
              console.log('dragleave', ev.target);
              elm.removeClass('dragging-over');
              ev.stopPropagation();
              ev.preventDefault();
          }
      });
      // 记得监听drop事件，removeClass dragging-over
      elm.on('drop',function(ev){
          console.log('drop');
          elm.removeClass('dragging-over');
      });

同时可以增加css，保证drag-zone元素dragging-over的时候，子元素的pointer-event都被禁止

.dragging-over *{
  pointer-events: none;
}

这样既解决了问题，又不会产生副作用，完美

坑：

在IE11下，需要增加对dragover事件的默认阻止，否则不会触发drop事件

      // 在ie下需要增加如下代码，否则不会触发drop事件
      elm.on('dragover',function(ev){
          ev.preventDefault();
      });

PS：在父元素上绑定dragenter和dragleave事件，其中每移动到一个子元素上事件会再次触发，这样的逻辑也不知道考虑的是啥？有知道欢迎告知

dragenter和dragleave事件

坑：

推荐阅读更多精彩内容