Mozilla designMode and object with absolute position

阅读更多

  近段时间在做一个有特殊需求的在线Editor，需要在编辑区中添加绝对定位("position:absolute;")的image；在Firefox中调试时发现，当选中绝对定位的image时，浏览器会为其添加一个default handler，通过这个handler我们可以在文档范围内随意的拖动image，而我们的需求是不能这样去改变image的位置的，需要将这一浏览器的默认行为disable掉。

  首先想到的是捕获dragdrop event，但试了半天发现，可以捕获拖动image的event，但通过default handler拖动的event却始终无法捕获

  接着想到了一种类似的情况，如果designMode打开，浏览器会为编辑区中的table也添加default handler，但我们可以通过执行以下命令阻止这一默认行为：

js 代码

document.execCommand('enableInlineTableEditing', false, false);

 
  也许也有相应的命令来阻止浏览器为绝对定位的对象添加default handler. 'enableInlineTableEditing'这个command是从FCKEditor中学来的，而他们也是通过研究mozilla的源码而发现的。所以我也下载了mozilla的源码研究了半天，终于在nsHTMLDocument.cpp中找到了所有支持的command列表：gMidasCommandTable；'enableInlineTableEditing'也在其中。但我并没有在里面发现和absolute position相关的command；杜撰了一些类似于'enableAbsolutePositioning'这样的command去试，都抛出异常告诉我没有实现...

  难道就没有办法对付它了吗？正当我感到绝望之时，组里一个聪明的家伙想到了一个巧妙的方法，很简单的解决了这个问题：default handler并不是一开始就有的，只有点击了绝对定位的对象它才会出现；而鼠标点击必然先触发一个mousedown事件，捕获这一事件，判断事件的targer是否是绝对定位的对象，如果是，则阻止对该事件的后续处理。代码如下：

js 代码

oOnMouseDown = function(e) {
   if (e.target.tagName == "IMG") {
      e.preventDefault();
      e.stopPropagation();
    }
}

document.addEventListener('mousedown', oOnMouseDown, true);

  第三个参数设为true，以便事件发生时首先调用我们定义的listener；判断语句还可以根据实际情况细化
  最终结果是，当点击编辑区中绝对定位的image时，什么也没有发生，可恶的deault handler再也出不来了，

• designMode_absolute.zip (729 Bytes)
• 描述: 简单测试文件
• 下载次数: 5