dragenter 和 dragleave 原
今天在做一个文件上传的功能！其它主要功能都很容易实现，最后却卡在一个地方： 我希望文件拖到指定的区域后，该区域能加亮，背景变色一下，离开后恢复。DOM结构类似于下面：
<div class="wrapper">
<div class="tools">
一些button
</div>
<div class="filestable">
一个table
</div>
</div>我希望在dragenter 到wrapper后，给它增加一个class样式，在dragleave wrapper后，再移除这个样式。 实际情况： 当拖入到wrapper后，再向外出来wrapper区域，整个过程是正常的。 但是当拖入到wrapper后，再向内进入 tools 或filestable等区域时，也会触dragleave事件。
难点是：在dragleave事件中，仅通过event，很难判断它到底是向内进入了子元素，还是向外离开整个区域了。
晚上回到家，想到原来用过的百度webuploader插件，去看一下它是怎么实现的吧！先看一下DEMO，
明显，它的外层div中，也有两个内部元素，事件也是绑定在最外层的。所以必须面临和我一样的问题！
找一下它的事件，删除了很多代码后：
_dragEnterHandler: function( e ) {
me.elem.addClass( prefix + 'over' );
}
_dragOverHandler: function( e ) {
clearTimeout( this._leaveTimer );
this._dragEnterHandler.call( this, e );
},
_dragLeaveHandler: function() {
var me = this,handler;
handler = function() {
me.dndOver = false;
me.elem.removeClass( prefix + 'over ' + prefix + 'denied' );
};
clearTimeout( me._leaveTimer );
me._leaveTimer = setTimeout( handler, 100 );
return false;
},一切的技巧都在dragleave中，写了一个延时函数，在这个事件中，不立即清除样式类。如果之后还有dragover事件的话，表明这个leave后，进入内部元素了，那这个延时函数就不执行了。代码很简单易懂！
唯一不懂是：为什么在dragover事件中，还要重复调用一下 ._dragEnterHandler. 呢？？目的何在？
最后看一下它是如何绑定事件的吧！
function bindFn( fn, context ) {
return function() {
return fn.apply( context, arguments );
};
}
this.dragEnterHandler = Base.bindFn( this._dragEnterHandler, this );
this.dragOverHandler = Base.bindFn( this._dragOverHandler, this );
this.dragLeaveHandler = Base.bindFn( this._dragLeaveHandler, this );
this.dropHandler = Base.bindFn( this._dropHandler, this );
this.dndOver = false;
elem.on( 'dragenter', this.dragEnterHandler );
elem.on( 'dragover', this.dragOverHandler );
elem.on( 'dragleave', this.dragLeaveHandler );
elem.on( 'drop', this.dropHandler );本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/06/13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
