右鍵單擊不會出現在正確的位置

Question

我正在開發一個地圖應用程序，在其中右鍵單擊Google地圖時，它會顯示一些選項。

問題是右鍵單擊沒有出現在正確的位置。

我該如何解決？

我嘗試通過使用絕對位置來定位它。

也嘗試過，在Jquery代碼下面，

 $( ".map-context-menu" ).click(function() {

      var styleProps = $( this ).css([
        "Ra", "latLng", "pixel"
      ]);
      $.each( styleProps, function( prop, value ) {
        html.push( prop + ": " + value );
      });

    });

這是我的HTML

`<div class="map-context-menu" ng-show="contextMenuActive">

                <div class="map-context-menu-item" >
                    Item 1
                </div>
                <div class="map-context-menu-item">
                    Item 2
                </div>
            </div>
`

Answer 1

$(document).bind('contextmenu', function (e) {
    e.preventDefault();
    e.stopPropagation();
    if ($(e.target).hasClass('map-context-menu')) {
        $('#contextMenu').css({
            left: e.pageX + 'px',
            top: e.pageY + 'px'
        }).show().fadeIn(500);
    }
    return false;
});

這將自動將#contextMenu放置在map-context-menu右鍵單擊的位置。

e.stopPropagation（）

這將阻止方法使DOM擁擠。 確保在創建另一個context menu之前，該context menu已銷毀。 例如，假設您在不同位置連續兩次單擊鼠標右鍵...而不是生成2次，則第一個將在創建第二個之前隱藏

e.preventDefault（）

將阻止顯示瀏覽器默認上下文菜單。 例如，每當您右鍵單擊網頁中的任何位置時，將顯示由瀏覽器創建的默認上下文菜單。 此行可以防止出現這種情況，而是顯示您自定義創建的

注意：請將#contextMenu更改為您創建的自定義上下文菜單的ID或類。 例如： （HTML）

 <ul id="contextMenu">
     <li></li>
     <li></li>
 </ul>

我已經將此CSS代碼添加到我的jsFiddle中，並且一切似乎都工作正常。 （樣式可以修改，它的position: fixed和display: none對於此工作至關重要）

的CSS

#contextMenu {
    background-color: red;
    list-style: none;
    padding: 0;
    margin: 5px 0 0 5px;
    font-size: 20px;

    display: none;
    position: fixed;
    border: 1px solid grey;
    width: 150px;
    box-shadow: 2px 2px 1px grey;
}