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

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 
    }); 
}); 

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