我希望能够禁止将图片（和其他内容）拖放到跨浏览器的内容可编辑div中。我了解了如何针对Chrome和IE进行操作。 Firefox顽固地拒绝。 http://jsbin.com/oqozo3处的代码段示例显示了事件正在触发，我正在取消事件，并且在Firefox中该图像仍然出现。
基本上，以下在Firefox中无法使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ContentEditable fails in FF</title>
<script type="text/javascript">
function init() {
var target = document.getElementById("target");
if (target.addEventListener) {
target.addEventListener ("dragenter", all, false);
target.addEventListener ("dragover", all, false);
target.addEventListener ("drop", all, false);
target.addEventListener ("dragdrop", all, false);
} else {
target.attachEvent ("ondragenter", all, false);
target.attachEvent ("ondragover", all, false);
target.attachEvent ("ondrop", all, false);
}
}
function all(event) {
if (event.preventDefault) { event.preventDefault();}
return false;
}
</script>
</head>
<body onLoad="init();">
<div id="target" style="border: 1px solid black; height: 100px;" contenteditable="true">This is editable content</div>
<div>
<p>I don't want the image to be draggable to the above div. Works in IE,
Chrome, not firefox.</p>
<img src="http://mozcom-cdn.mozilla.net/img/firefox-100.jpg">
</div>
</body>
</html>
我已经看过：ContentEditable DIV - disabling drag and drop，但是那里的建议在Firefox中也行不通。
任何不使用jQuery之类的框架的原因，它所做的事情都是跨浏览器的