le menu contextuel descend sous le pointeur

Question

J'ai besoin d'un menu contextuel et j'essaie de régler sa position ferme le clic du pointeur. Sa position est fixe.

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

Position horizontale est toujours ok, mais verticale est parfois ok - parfois de 50 - 70 px sous le pointeur. Je ne peux pas voir une raison. Effacer le cache n'aide pas.

Answer 1

Si vous le souhaitez, vous pouvez utiliser 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>