Question

我有我想要调用的contextmenu，并将其坐标设置为X和Y坐标。我怎么能这样做？

https://jsfiddle.net/coolerprinter/xg10vzeL/

此代码无效且无效：

$("body").on("contextmenu", function(e){
    var x = function(e) { 
        return e.pageX 
    };
    var y = function(e) { 
        return e.pageY 
    };

    $(".contextmenu").css({
        "display": "block",
        "left": x,
        "top": y
    });
    return false;
});

Answer 1

首先，您需要将事件挂钩到document，而不是body。其次，您需要向pageX和pageY CSS属性提供left和top的实际值，而不是函数。试试这个：

$(document).on("contextmenu", function(e) {
    e.preventDefault();
    $(".contextmenu").css({
        "display": "block",
        "left": e.pageX,
        "top": e.pageY
    });
});

Updated fiddle

要将其扩展为正常的上下文菜单，当它在其外部发生单击时它会消失，那么您需要在文档上添加一个click处理程序：

$(document).on({
    contextmenu: function(e) {
        e.preventDefault();
        $(".contextmenu").css({
            "display": "block",
            "left": e.pageX,
            "top": e.pageY
        });
    },
    click: function(e) {
        var $target = $(e.target);
        if ($target.is('.contextmenu') || $target.closest('.contextmenu').length) {
            e.preventDefault();
        } else {
            $(".contextmenu").hide();
        }
    }
});

Example fiddle

如何在光标坐标处打开自己的上下文菜单？

1 个答案: