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

Question

我有自己的上下文菜单，我想调用它并将其坐标设置为 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

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

$(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