Question

我有一个iframe，其designMode设置为'on'。其中有多个div，因为iframe是可编辑的，用户可以输入并编辑其中任何一个div。我需要禁用用户编辑其中一个div的功能。

我可以阻止用户点击这样的div：

document.getElementById('mydiv').addEventListener('mousedown', function(event) {
  event.preventDefault();
  return false;
}, true);

但是，用户仍然可以使用键盘箭头键，将光标移动到div，然后进行编辑。我尝试在div获得焦点时触发回调，如下所示：

document.getElementById('mydiv').addEventListener('focus', function(event) {
  ...
}, true);

但永远不会调用该回调。然后我试着阻止按键：

document.getElementById('mydiv').addEventListener('keydown', function(event) {
  event.preventDefault();
  return false;
}, true);

但同样，回调永远不会被调用。我甚至尝试将回调附加到文档中：

document.addEventListener('keydown', function(event) {
  ...
}, true);

然后调用回调，但是只有当目标元素是关注的div时，我才需要一种取消事件的方法。

欢迎任何关于如何实现目标的想法。

Answer 1

如果您可以忽略一些较旧的浏览器，例如Firefox 2，最简单的方法是不使用designMode，而是在每个可编辑的{{1}上使用contentEditable s而不是不可编辑的<div> s。

<div>

否则，正如您所发现的那样，您正在与内置的浏览器行为展开斗争。

Answer 2

您可以简单地将“可编辑”类应用于任何可编辑元素，并在不是这种情况时将其删除。

YUI为此提供了一个很好的简单测试：YAHOO.util.Dom.hasClass（yourEl，'editable'）;

然后在你的处理程序中，如果目标没有'editable'类，则取消/ return / preventDefault / stopEvent。

-d