コンテキストメニューの位置付け

Question

jQueryを使用してカスタムコンテキストメニューを配置しようとしています。
初めて右の位置（マウス座標）に表示されますが、現在の位置が新しい位置と合計され、メニューが画面から消えます。
ここ ではJavaScriptです：

<script> 
$(function(){ 
    $('#box').hide(); 

    $(document).bind("contextmenu", function(e) { 
     $("#box").offset({left:e.pageX, top:e.pageY}); 
     $('#box').show(); 
     e.preventDefault(); 
    }); 

    $(document).bind("click", function(e) { 
     $('#box').hide(); 
    }); 
    $('#box').bind("click", function(e) { 
     $('#box').hide(); 
    }); 
}); 
</script> 

Answer 1

offsetメソッドを使用しないでください、してみてくださいcss代わりに、位置決め用のコンテキストメニューは絶対：

$("#box").css({left:e.pageX, top:e.pageY}); 

CSS：

#box { 
    ... 
    position: absolute; 
} 

http://jsfiddle.net/smxLk/

Answer 2

問題は、右クリックしてから別の場所を左クリックして再度右クリックすると、位置が正しくないことです。

問題の根本原因は、要素を表示する前にオフセットを設定することです。要素がdisplay:noneに設定され、そのオフセットが変更されると、jQueryが混乱するようです。あなたがshowを切り替える必要がある問題や、あなたのコード内のoffset行修正するには

：

$(document).bind("contextmenu", function(e) { 
    $("#box").offset({left:e.pageX, top:e.pageY}); 
    $('#box').show(); 
    e.preventDefault(); 
}); 

が

$(document).bind("contextmenu", function(e) { 
    $('#box').show(); 
    $("#box").offset({left:e.pageX, top:e.pageY}); 
    e.preventDefault(); 
}); 

Demo
と
Source

Answer 3

なっ位置を試してみてください。一定;次の条件に基づいて、コンテキストメニューの位置が変化すると - ところで

var windowHeight = $(window).height()/2; 
var windowWidth = $(window).width()/2; 
if(e.clientY > windowHeight && e.clientX <= windowWidth) { 
    $("#contextMenuContainer").css("left", e.clientX); 
    $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY); 
    $("#contextMenuContainer").css("right", "auto"); 
    $("#contextMenuContainer").css("top", "auto"); 
} else if(e.clientY > windowHeight && e.clientX > windowWidth) { 
    $("#contextMenuContainer").css("right", $(window).width()-e.clientX); 
    $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY); 
    $("#contextMenuContainer").css("left", "auto"); 
    $("#contextMenuContainer").css("top", "auto"); 
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) { 
    $("#contextMenuContainer").css("left", e.clientX); 
    $("#contextMenuContainer").css("top", e.clientY); 
    $("#contextMenuContainer").css("right", "auto"); 
    $("#contextMenuContainer").css("bottom", "auto"); 
} else { 
    $("#contextMenuContainer").css("right", $(window).width()-e.clientX); 
    $("#contextMenuContainer").css("top", e.clientY); 
    $("#contextMenuContainer").css("left", "auto"); 
    $("#contextMenuContainer").css("bottom", "auto"); 
} 

http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/