javascript - 自定义上下文菜单在 Mac 上的 Firefox 中不起作用

Question

我有这个自定义上下文菜单。它适用于所有浏览器，Mac 计算机上的 Firefox 除外。

我已经创建了它，所以当用户右键单击时，原始菜单将被隐藏，之后，自定义菜单将被删除，如果它已经显示(因此只会显示一个菜单当时)。最后，将创建菜单。

我还添加了另一个功能，如果用户点击页面上的其他任何地方，菜单也会被删除。

正如我所说:这只是 Mac 上 Firefox 的一个问题。

这是我的代码:

var contextmenu = $('<div class="contextmenu">'
                    + '<span class="row">First Row</span>'
                    + '<span class="row">Second Row</span>'
                    + '<span class="row">Third Row</span>'
                    + '<span class="row about">Fourth Row</span>'
                    +'</div>');

// Show Contentmenu if user right-click anywhere
$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $('.contextmenu').remove();
    contextmenu.appendTo("body").css({
        top: event.pageY,
        left: event.pageX
    });
});

// Hide Contentmenu if user click anywhere
$(document).click(function() {
    $('.contextmenu').remove();
});

我也试过用 $(document).bind("contextmenu", function() {...}); 而不是 $(document).click(function() {...}); 但这里没有区别。

我真的不明白为什么这在 Mac 上的 Firefox 中不起作用，而在 Windows 上的 Firefox 和所有其他浏览器中都可以正常工作。

Fiddle Demo

Answer 1

我希望您在 Mac 上遇到的 Firefox 问题与我在 Linux 上使用 Firefox 时遇到的问题相同。

这段代码:

$(document).click(function() {
    $('.contextmenu').remove();
});

实际上是在上下文菜单出现后隐藏它，所有这些都在同一个点击中。我在 Ubuntu 中的上下文菜单出现在右键单击 onmousedown 上，而不是像在 Windows 上那样单击 onclick，因此正在创建自定义上下文菜单，然后一旦释放鼠标按钮并稍微移动它就会立即隐藏。

修改它以便在 mousedown 上隐藏上下文菜单为我解决了 Firefox 上的问题:

$(document).mousedown(function() {
    $('.contextmenu').remove();
});

希望这也解决了 Mac 上 Firefox 的问题。