Javascript 在html5拖放中，Dragener在dragleave之前调用两次

我正在研究HTML5拖放的概念。目前，我在

dragenter

事件上面临一个问题，该事件在

dragleave

之前第二次触发（对于子元素）。因此，我在

dragenter

时给出的虚线边框样式在某些情况下不会在

dragleave

之后删除。当我在谷歌搜索时，我引用了一些链接，但仍然无法解决这个问题。我添加了CSS属性

指针事件：none

，但这在IE9和IE10中不兼容

请注意，我需要IE9及以上版本的兼容性，还有Mozilla

PFB代码片段

var-dragSrcEl=null；
var dragEnteredSrcEl=null；
var集合=$（）；
功能手柄式起动（ev）{
dragSrcEl=电动汽车目标；
ev.target.style.opacity=0.4；
ev.target.classList.add（'moving'）；
setData（'text/html'，ev.target.innerHTML）；
}
功能手柄（ev）{
ev.preventDefault（）；
}
功能手柄进入（电动、电动）{
ev.stopPropagation（）；
log（'drag enter！'）；
var dragEnteringElement=ev.target；
collection=collection.add（dragenteringlement）；
//dragEnteredSrcEl=dragEnteringElement；
el.classList.add（'over'）；
}
功能手柄（电动、电动）{
//控制台日志（ev.target）；
var下降元件=el；
//如果删除我们正在拖动的同一列，请不要执行任何操作。
如果（dragSrcEl！=电动目标）{
//将源列的HTML设置为我们删除的列的HTML。
dragSrcEl.style.opacity=1；
dragSrcEl.innerHTML=droppingElement.innerHTML；
droppingElement.classList.remove（'over'）；
droppingElement.innerHTML=ev.dataTransfer.getData（'text/html'）；
}
}
功能手柄（电动汽车，电动汽车）{
//控制台日志（ev.target）；
setTimeout（函数（）{
var dragLeavingElement=ev.target；
console.log（collection.length）；
collection=collection.not（dragLeavingElement）；
if（collection.length==0）{
log（'drag left！'）；
el.classList.remove（'over'）；
}
}, 1);
}
功能手柄（ev）{
ev.target.style.opacity=1；
ev.target.classList.remove（'moving'）；
ev.target.classList.remove（'over'）；
}
函数handleContentClick（内容）{
警报（内容）；
}

.clearfix{
明确：两者皆有；
}
[可拖动]{
光标：移动；
}
.col-md-4{
宽度：150px；
高度：150像素；
边框：2倍纯色橙色；
浮动：左；
边缘顶部：5px；
右边距：5px；
文本对齐：居中；
}
.col-md-4.over{
边框样式：虚线；
}
/*.col-md-4 h2{
指针事件：无；
}*/

你好
欢迎
世界！
你好！
热烈欢迎！
大世界！

您应该使用

event.stopPropagation（）谁阻止事件与子元素触发

这里有一个文档：
这是一个Firefox错误。在Firefox中，“Dragenter事件”被触发两次。不管是否有子元素。
您可以尝试将event.target和event.currentTarget与指针事件结合使用：无。
您能告诉我应该在哪里使用此
event.stopPropagation（）
吗？在函数的开头，出现问题：handleDragEnter。尝试放置event.stopPropagation（）；我尝试在handleDragEnter中添加
event.stopPropagation（）
，但问题仍然存在。还使用
事件更改了代码段。stopPropagation（）