TinyMCE：onMouseUp 上的图像选择（wordpress / contenteditable）答案

【问题标题】：TinyMCE : image selection on onMouseUp (wordpress / contenteditable)TinyMCE：onMouseUp 上的图像选择（wordpress / contenteditable）
【发布时间】：2012-02-07 22:00:22
【问题描述】：

我正在为 Wordpress 开发自定义 TinyMCE 编辑器。 Wordpress 的功能之一是 Image Caption，它在 <img> 标签周围放置了一个 <div>。

我正在尝试实现以下目标：当用户单击 <img> 时，我希望选择父 <div>。

为此，我在 onMouseDown 调度程序上添加了一个自定义处理程序，用于选择标题 <div>。

ed.onMouseDown.addToTop(function(ed, e) {

  // Check if it is an image or image with caption
  var parents = ed.dom.getParents(e.target,'div.amu_container');

  if ( parents.length > 0 ) {
    var container = parents[0];

    // Correct selection to amu_container
    ed.selection.select(container);

    // Prevent default
    tinymce.dom.Event.cancel(e);
  }
});

一切正常：在所有 onMouseDown 处理程序之后，标题 <div> 选择得很好。

然后在mouseUp 上，FF 上一切正常，但在 Chrome 上，当所有 onMouseUp 处理程序完成时，<img> 被选中，失去标题 <div> 的先例选择。

但是mouseUp 事件是defaultPrevented...

有什么想法吗？

编辑： 这是一个重现我的问题的 jsfiddle：http://jsfiddle.net/nH8fj/5/

当用户点击图片或容器时，应该选择整个<div>。在逐步调试中，选择有效，但只选择了图像。

我在 Chromium 16.0.912.36 linux 上，该错误可在最新的 Chrome 窗口上重现。

【问题讨论】：

标签： javascript wordpress tinymce dom-events contenteditable

【解决方案1】：

e.target 适用于 webkit，但不适用于 IE。在那里你必须使用e.srcElement。也许这里的 Chrome 也有类似的问题。

我在这里找到了 Chrome 的错误报告：http://core.trac.wordpress.org/ticket/15848

【讨论】：

感谢 IE 的建议。在这种情况下，我使用 tinyMCE 框架，我希望像在 jQuery 中一样防止这种不当行为。对于我的问题：我检查了e.target，在 mouseUp 上没问题。这似乎确实是一种默认行为，没有被阻止：如果我一步一步执行 JS，直到最后一步选择正常（整个<div>），然后选择减少到仅<img>。我将尝试在 jsfiddle 上重现该错误。
jsfiddle在这里是个好东西，也请给我们你的chrome版本
我用 jsfiddle 和一些解释编辑了我的帖子：jsfiddle.net/nH8fj/5
花了我一些时间，但我想出了一个解决方法：jsfiddle.net/nU2wq