将上下文菜单与动态元素绑定答案

【问题标题】：Bind contextmenu with dynamic elements将上下文菜单与动态元素绑定
【发布时间】：2014-10-22 14:03:13
【问题描述】：

我正在编写一个脚本，以在您单击内容可编辑 div 中的图像时创建自定义右键菜单。这是执行此操作的部分：

$('.editor-text img').bind('contextmenu', function (event) {
   // Do stuff
});

这适用于已经存在的元素。但是如果你移动其中一张图片，从而使它成为一个新添加的动态元素，jquery 就找不到它了。我认为解决方案应该是这样的：

$(document).on("contextmenu", ".editor-text img", function (event) {
   // Do stuff
});

但这也不起作用。如何调整代码使其适用于动态元素？

查看问题：

转到此处：http://jsfiddle.net/YsW8D/4/ 使用 webkit 浏览器
右键单击图像以查看菜单
关闭菜单后，单击并将图像拖动到文本中的其他位置
再次右键单击将不起作用。
js第9行是相关代码。

【问题讨论】：

在 Firefox 上我什至没有得到第一个上下文菜单，仅供参考。
从第一个 img contextmenu 处理程序中删除 return false;，这会使事件停止传播到文档级别，然后您可以委托事件：jsfiddle.net/YsW8D/5 BTW，看起来您最好克隆带有绑定的元素处理程序而不是使用.clone(true)，会使逻辑更具可读性恕我直言
对于第一个处理程序，如果你需要的话，可以使用event.preventDefault();
artm- 感谢 Firefox 的报告。尽管这是为 webkit 环境制作的，但我会对其进行研究。 A. Wolff-谢谢。在你的帮助下，我现在可以正常工作了。如果您想发布作为答案，我会接受。

标签： javascript jquery dynamic binding contextmenu

【解决方案1】：

你可以试试这个。

第一步：防止默认。
第二步：设置鼠标指针的位置。
第三步：显示菜单。

（查看下面的示例。）

function openMenu(e) {
var h1 = document.getElementsByTagName("h1")[0];
var menu = document.getElementById("menu");
e.preventDefault();
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
menu.style.display = "block";
document.addEventListener("click", function() {
menu.style.display = "none";
});
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#menu {
position: absolute;
width: 100px;
height: 100px;
background-color: white;
}

#menu a {
height: 50px;
border: 1px solid black;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

#menu a:hover {
background-color: #D3D3D3;
}

<!DOCTYPE html>
<html>
<body>
<h1 oncontextmenu="openMenu(event)">Right click on me.</h1>
<div id="menu" style="display: none;">
<a href="https://www.google.com/" target="_black">Google</a>
<a href="https://stackoverflow.com/" target="_black">Stackoverflow</a>
</div>
</body>
</html>

【讨论】：