如何在光標坐標處打開自己的上下文菜單？

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的實際值提供給left和top CSS屬性，而不是函數。 嘗試這個：

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

更新了小提琴

要將其展開為像普通上下文菜單一樣，當它在其外部發生單擊時它會消失，那么您需要在文檔上添加一個額外的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();
        }
    }
});

示例小提琴