11

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>
4

3 に答える 3

8

試行位置: 固定; 次の条件に基づいてコンテキストメニューの位置が変わります -

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/zakn7​​Lwb/14/

于 2015-07-11T07:24:05.130 に答える
8

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

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

CSS:

#box {
    ...
    position: absolute;
}

http://jsfiddle.net/smxLk/

于 2013-04-03T18:44:36.877 に答える
6

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

問題の根本は、要素を表示する前にオフセットを設定することです。要素がに設定され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();
});

デモ
と
ソース

于 2013-04-03T18:44:46.223 に答える