【发布时间】：2012-01-15 16:53:42
【问题描述】：
我正在尝试以跨浏览器的方式在锚元素上使用上下文菜单和点击处理程序，但事实证明这非常困难。
这里的问题是：如果 preventDefault() 从 contextmenu 事件处理程序调用 contextmenu 事件，浏览器的行为会有所不同。所有浏览器都不会正确显示其浏览器的默认上下文菜单。然而，在 Chrome 和 Safari 中，浏览器随后会跟随元素的单击事件（并且仅当上下文菜单事件被取消时）。
当我从上下文菜单处理程序中取消上下文菜单事件时，我不希望在同一元素上触发连续的单击事件。有没有一种干净的方法来解决这个问题？无论是在 contextmenu 处理程序上返回 false 还是调用 stopPropagation 函数都不会缓解这个问题！
Here 是一个带有奇怪故障的演示（使用 Webkit 检查器或 Firebug 来查看跟踪）
这是一个答案：使用 jQuery 而不是 POJ 来清理宽度/高度的东西：
function Cancel_Next_Click()
{
// Compatibility - Chrome & Safari bug where context click event is followed by an undesired click event
var Cancel_Next_Click_Element = document.createElement("div");
Cancel_Next_Click_Element.style.position = "fixed";
Cancel_Next_Click_Element.style.left = "0px";
Cancel_Next_Click_Element.style.top = "0px";
Cancel_Next_Click_Element.style.width = window.innerWidth;
Cancel_Next_Click_Element.style.height =window.innerHeight;
document.body.appendChild(Cancel_Next_Click_Element);
var Cancel_Next_Click_Element_Listener = function() {
document.body.removeChild(Cancel_Next_Click_Element);
document.removeEventListener('mouseup', Cancel_Next_Click_Element_Listener, false);
}
document.addEventListener('mouseup', Cancel_Next_Click_Element_Listener, false);
}
【问题讨论】：
-
您有使用 POJ 吗？或者您可以使用 jquery 或其他一些框架吗？在那你也许可以使用除
a标签之外的东西来完成这个 -
如果 jquery 或任何其他框架确实解决了这个问题，我真的很想知道！我尝试在 jQuery 中以它提供的每一种已弃用和新的方式绑定事件，但它们都不能解决我认为的 WebKit 错误。
-
目前，解决这个问题的最简洁和最通用的方法可能是在上下文菜单处理程序中创建一个临时拦截元素，使点击无效，但我希望有一个更简洁的解决方案！跨度>
标签： javascript events webkit cross-browser contextmenu