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

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