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

  难道就没有办法对付它了吗?正当我感到绝望之时,组里一个聪明的家伙想到了一个巧妙的方法,很简单的解决了这个问题:default handler并不是一开始就有的,只有点击了绝对定位的对象它才会出现;而鼠标点击必然先触发一个mousedown事件,捕获这一事件,判断事件的targer是否是绝对定位的对象,如果是,则阻止对该事件的后续处理。代码如下:
js 代码
 
  1. oOnMouseDown = function(e) {  
  2.    if (e.target.tagName == "IMG") {  
  3.       e.preventDefault();  
  4.       e.stopPropagation();  
  5.     }  
  6. }  
  7.   
  8. document.addEventListener('mousedown', oOnMouseDown, true);    

  第三个参数设为true,以便事件发生时首先调用我们定义的listener;判断语句还可以根据实际情况细化
  最终结果是,当点击编辑区中绝对定位的image时,什么也没有发生,可恶的deault handler再也出不来了,
  • designMode_absolute.zip (729 Bytes)
  • 描述: 简单测试文件
  • 下载次数: 5

你可能感兴趣的:(fckeditor,浏览器,Firefox)