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时遇到的Firefox问题相同。

这段代码：

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

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

修改它以便隐藏上下文菜单，以便在Firefox上修复我的问题：

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

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

Answer 2

这对我有用：

$(document).on("mousedown", function(event){
                    if (!$(event.target).closest(".context-menu").length)
                        cmenu.hide();
                });

自定义上下文菜单在Mac上的Firefox中无法使用

2 个答案: