最近遇到一个需求，就是在用户把文件拖住到我们的编辑器时，编辑器样式上需要做出反应，让用户知道拖拽已经进入有效范围，可以松手了。一看，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，和想象的完全不一样啊。
这是什么鬼？我在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事件，其中每移动到一个子元素上事件会再次触发，这样的逻辑也不知道考虑的是啥？有知道欢迎告知
