コンテキストメニューがポインタの下に移動する

Question

コンテキストメニューが必要ですが、ポインタを閉じる位置を設定しようとしています。その位置は固定されています。

<ul id='cmenu'> 
    <li class='citem' id='c-edit'>EDIT</li> 
    <li class='citem' id='c-public'>PUBLIC</li> 
    <li class='citem' id='c-later'>PUBLIC LATER</li> 
</ul> 

JS

$(document).on('contextmenu', '.itemp', function(e) { 
    e.preventDefault(); 
    var w = $('#cmenu').width(); 
    var h = $('#cmenu').height(); 
    var x = e.pageX; 
    var y = e.pageY; 
    var cx = window.innerWidth/2; 
    var cy = window.innerHeight/2; 
    var topb = y-h; 
    if (x <= cx) {$('#cmenu').css('left', x + 10 + 'px');} 
    else {$('#cmenu').css('left', x-w + 'px');} 
    if (y <= cy) {$('#cmenu').css('top', y + 'px');} 
    else {$('#cmenu').css('top', topb + 'px');} 
    $('#cmenu').show(); 
}); 

水平位置は常にOKですが、垂直方向は時々OKです - 時々約50 - ポインタ下70ピクセル。私は理由を見ることができません。キャッシュのクリアは役に立ちません。

Answer 1

あなたが好きなら、あなたはjQuery-contextMenu pluginを使用することがあります。

$.contextMenu({ 
 
    // define which elements trigger this menu 
 
    selector: ".itemp", 
 
    // define the elements of the menu 
 
    items: { 
 
     edit: { 
 
      name: "EDIT", callback: function (key, opt) { 
 
       console.log("EDIT!"); 
 
      } 
 
     }, 
 
     public: { 
 
      name: "PUBLIC", callback: function (key, opt) { 
 
       console.log("PUBLIC!") 
 
      } 
 
     }, 
 
     public_later: { 
 
      name: "PUBLIC LATER", callback: function (key, opt) { 
 
       console.log("PUBLIC LATER!") 
 
      } 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.min.css"> 
 
<script src="https://rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.min.js"></script> 
 
<script src="https://rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.ui.position.min.js"></script> 
 

 
<div class="itemp">This is a sample div element: rigth mouse click to open context menu</div> 
 
<br/> 
 
<div>Here there is no context menu</div>