Javascript HTML5 DragDrop进入和离开事件被一个接一个地调用

我有一个非常简单的拖放效果，当拖动进入（或结束）和离开时更改类名。然而，我正在经历不断的进出

看看这个简单的HTML代码

这是我的CSS

.box{
位置：相对位置；
宽度：80%；
高度：300px；
边框：1px纯黑；
}
博克斯。德拉戈弗：之后{
位置：绝对位置；
背景色：rgba（0,255,0,0.05）；
内容：''；
排名：0；
右：0；
底部：0；
左：0；
}
.儿童箱{
位置：相对位置；
宽度：100%；
身高：100%；
}

这是我的剧本

$（'.box'）。在（'drag dragstart dragend dragover dragenter dragleave drop'，函数（e）上{
e、 预防默认值（）；
e、 停止传播（）；
}).bind（'dragover dragenter'，函数（e）{
e、 停止传播（）；
$（this.addClass（'dragover'）；
console.log（'\nEvent:'+e.originalEvent.type+'--Target:'+this.className）；
}).bind（'dragleave dragend drop'，函数（e）{
e、 停止传播（）；
$（this.removeClass（'dragover'）；
console.log（'\nEvent:'+e.originalEvent.type+'--Target:'+this.className）；
});

我已经创建了JSFIDLE，如果您尝试将任何文件拖动到框中，它将创建一个从绿色到白色的闪烁效果。这是因为

dragenter

和

dragleave

事件被依次调用

我怀疑它是由盒子引起的。你知道怎么修吗

谢谢…

添加到

：之后的
。这将使
：after
不响应鼠标事件，包括您在代码中提到的所有事件

.box.dragover:之后{
指针事件：无；/*很高兴听到：）祝你好运。