javascript - 仅当单击 FireFox 中的图像时才在上下文菜单中显示项目

Question

[更新]我可能错误地解释了这个问题:我知道如何隐藏菜单元素 - 但如何测试单击的元素是否可编辑？ Chrome 检测到可编辑元素 - 如何在 ff 中实现它。

我试图让上下文菜单中的项目仅在单击图像时才显示

这是我的emailpicture.js

代码:

function showHideItems(event)
{   
      var show = document.getElementById("emailImage");
      show.hidden = !(gContextMenu.onImage);
}

和 xul 代码:

<?xml version="1.0"?>
<overlay id="emailpicture" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://emailpicture/content/emailpicture.js"/>

<menupopup id="contentAreaContextMenu">
  <menuitem id="emailImage" label="Email This Image" onpopupshowing="showHideItems()" oncommand=""/>

</menupopup>


</overlay>

这样做的结果是在浏览器中的每个对象上显示一堆项目(可能是 FireFox 的所有项目)我应该使用 onpopupshowing 事件吗？或者另一个？我用得对吗？

谢谢各位的解答

Answer 1

如果你看the ContextMenu MDN page他们有一个这样的例子。当前代码的主要问题是您将 onpopupshowing 放在 <menuitem> 上什么时候应该是<menupopup> 。此外，如果您查看 MDN 的 document.popupNode 它说鼓励您使用 .triggerNode 反而。此外，查看popupshowing event reference我们看到它有一个 .target ，但不清楚这是否是 <menupopup> (我在下面假设了这一点)、被单击的节点或其他内容(请参阅代码中的注释)。

以下代码利用上述内容并使用 .addEventListener 附加监听器确保与可能使用 onpopupshowing 属性的任何其他内容不发生冲突。

在您的emailpicture.js中

// First define listener
function showHideItems(e) {
    var menupopup = e.target, // I believe `.target` is the <menupopup>, otherwise use `this`. 
        triggerNode = menupopup.triggerNode, // get node that was clicked to open context menu
        triggerIsImage = (triggerNode instanceof Components.interfaces.nsIImageLoadingContent && triggerNode.currentURI),
          // test if it is an image (as from MDN, I would've gone with `.nodeType` and `.nodeName` checks?)
        elmToHide = menupopup.getElementById('emailImage');
    if(elmToHide)
        elmToHide.hidden = !triggerIsImage;
}
// Then attach it to <menupopup>, remember the element has to exist before you can do this so you might want to wait for DOMContentLoaded
document.getElementById('contentAreaContextMenu')
    .addEventListener('popupshowing', showHideItems, false);

那么对于 XUL，不要包含属性 onpopupshowing。

我要指出的是，我还没有测试过这个，所以如果它不起作用，首先检查事件是否被触发，然后检查 .target正如我所假设的(将来可能会为其他人澄清 MDN)。