强制单击 <img> 标签以选择包装 <a> 标签答案

【问题标题】：Force click on <img> tag to select wrapping <a> tag强制单击 <img> 标签以选择包装 <a> 标签
【发布时间】：2012-03-26 05:35:54
【问题描述】：

这是在 Dojo 编辑器的上下文中，但它应该更普遍地应用。

我有一个 <img> 标记，它被包裹在一个 <a> 标记中：

<a><img width="146" height="109" src="/gaggleVideoProxy.do?op=thumb&amp;thumbUrl=http://i.ytimg.com/vi/xoZXdWl7BZs/default.jpg" _djrealurl="/gaggleVideoProxy.do?op=thumb&amp;thumbUrl=http://i.ytimg.com/vi/xoZXdWl7BZs/default.jpg" &ytvideoid="xoZXdWl7BZs&amp;userVideoId=1073344&quot;"></a>

如果单击此按钮，则图像被选中。点击删除键会导致图片被删除，但会留下链接标签。

我正在寻找一种方法来确保在删除 <img> 标记时删除 <a> 标记。

更新

事实证明，这更像是一个 dojo api 问题。看这个 SO 问题/答案给了我做我需要的基本工具：

How can i add event listener to the content of dojo editor?

【问题讨论】：

发布您的 JavaScript 代码。应该只是在父节点上调用 delete 方法。
我还没有任何值得发布的 javascript。我正在寻找一种方法来：1）捕获<img>上的删除事件，然后删除或2）在选择<img>时强制选择<a>标签（以便删除会影响<a>)

标签： javascript html image hyperlink dojo

【解决方案1】：

不是删除图像，而是删除图像的父节点。

【讨论】：

怎么样？我试图在上捕获 onclick 事件，然后在上调用 focus()，但这似乎不起作用。
您使用的是 jQuery 还是原始 Javascript？如果你使用 jQuery，这可能会变得很容易解决。
使用道场。我可以在 Dojo 中做任何可以在 jQuery 中完成的事情，所以我全神贯注。
如何捕获删除事件？

【解决方案2】：

这行得通：

_connectTagEvents: function(){
    this.editor.onLoadDeferred.addCallback(dojo.hitch(this, function(){
  this.connect(this.editor.editNode, "onclick", this._onClick);
    }));
},
_onClick: function(e){
  var target = e.target;
  var tag = target.tagName ? target.tagName.toLowerCase() : "";
  var wrapper = target.parentNode;

  if(/* TAG and/or WRAPPER are what you want*/) {        
    dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [wrapper]);
  }
}

这将强制选择包装元素。（不要忘记从initButton() 方法调用_connectTagEvents。

【讨论】：

我认为如果你这样做，你最终可能会搞砸更改历史......你可以通过覆盖 LinkDialog::_getCurrentValues 来做到这一点（没有尝试......只是一个想法）