javascript – 当在drop函数中移动iframe时,不会在Chrome中触发Dragend事件

前端之家收集整理的这篇文章主要介绍了javascript – 当在drop函数中移动iframe时,不会在Chrome中触发Dragend事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
JSFiddle: https://jsfiddle.net/r8wxpujg/1/

在每次完整的拖放操作中,我都希望在被拖动的元素上触发dragstart和dragend事件.上面链接的演示通过计算dragstart和dragend事件来演示这种效果.当通过拖放操作移动图像时,dragstart和dragend事件将触发并且计数器按预期递增.单击该按钮时,不是移动图像而是移动iframe,而dragend计数器停止递增,表示dragend事件永远不会被触发.

不知何故,在Chrome中,DOM中移动iframe会取消dragend事件被触发.

我已经在Firefox和IE11中对此进行了测试,并且在移动iframe时都具有预期的行为.

我已经研究了几天了,并且一直无法找到任何信息,所以我想问一下是否有人之前遇到过此问题,或者有人有解决方案.这可能是Chrome中的错误吗?或者我只是遗漏了一些东西.

编辑:这是铬中确认的错误,错误报告可以在这里找到:https://bugs.chromium.org/p/chromium/issues/detail?id=737691.

在问题得到解决之前,请参阅下面的保罗答案以获得解决方法.

解决方法

我同意这是一个 Chrome bug,我没有解决方案.但在某些情况下,您可以通过延迟iframe移动来解决错误,直到拖动事件完成.它工作于 this fork of your fiddle.只需更换你的
if(element.id === 'div1drag') {
    document.getElementById('div1').appendChild(item);
}
else if(element.id === 'div2drag') {
    document.getElementById('div2').appendChild(item);
}

有了这个

if(element.id === 'div1drag') {
    window.setTimeout(function() {
        document.getElementById('div1').appendChild(item);
    },0)
}
else if(element.id === 'div2drag') {
    window.setTimeout(function() {
        document.getElementById('div2').appendChild(item);
    },0)
}

另外,感谢您报告该错误.今天让我发疯了.

原文链接:https://www.f2er.com/js/157887.html

猜你在找的JavaScript相关文章