javascript - Firefox 在 dragenter 事件上发送垃圾邮件

标签 javascript html firefox

尝试构建一些拖放功能,但在 Firefox 中遇到了一个奇怪的错误。我将整个文档的正文作为放置区域,并希望在将某些对象拖动到页面上时更改 h1 值。

看起来完全没有问题:http://jsfiddle.net/j7u6hLyj/

除了 Firefox 之外,它在任何地方都可以正常工作。当我在页面中拖动对象时 - 没有问题,除了对象被拖动到文本上的情况之外,如果您尝试该示例并将文件拖动到文本上,您会注意到 ondragenter当对象漂浮在文本上时, 事件会不间断地触发。它只发生在 Firefox 中。

最佳答案

似乎innerHTML 的更改正在重置事件是否已引发的状态,从而导致它陷入循环。这可能是 Firefox 中的一个错误。添加一个标志以仅在之前未更改过的情况下更改文本,以防止其陷入此循环。然后,如果需要,您可以处理 Dragleave 事件来清理此标志。

var drop = document.getElementById('drop'),
text = document.getElementById('promo-text');
var textChanged = false;

drop.ondragenter = function () {
    console.log('dragged!');
    if (!textChanged) {
        text.innerHTML = 'Drop it here!';
        textChanged = true;
    }
    return false;
};

此代码在 jsfiddle 上运行:http://jsfiddle.net/17aq9dhs/

关于javascript - Firefox 在 dragenter 事件上发送垃圾邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33769197/

相关文章:

javascript - 在 angularjs 中绑定(bind) HTML 属性

javascript - 在 div 已经附加到一个 div 之后,将 div 附加到另一个 div

html - 在链接上使用 CSS 转换时不稳定

javascript - jquery遍历html元素获取IMG标签

javascript - 如何在javascript中使用get命令读取本地文本文件

javascript - crossdomain.xml 配置

javascript - 单选按钮中选定的选项不起作用

firefox - 控制 Firefox 中视频/音频流的音量增益

html - <input> 内的填充在 Firefox 和其他浏览器中显示 2 个结果

javascript - 为什么在生成器中调用函数运行得更快?