Question

我正在开发一款地图应用，在右键点击谷歌地图时，它会显示一些选项。

问题是右键单击没有出现在正确的位置。

我该如何解决这个问题？

我尝试使用绝对位置来定位它。

还试过，在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在另一个#contextMenu被创建之前被销毁。例如，假设您在不同位置连续2次右键单击...而不是2次产生，第1次将在创建第2次之前隐藏

<强> e.preventDefault（）

将阻止显示浏览器默认上下文菜单。例如，无论何时右键单击网页中的任何位置，都会显示由浏览器创建的默认上下文菜单。此行可以防止这种情况，并将显示您自定义创建的

N.B：请将<ul id="contextMenu"> <li></li> <li></li> </ul>更改为您创建的自定义上下文菜单的ID或类。例如：（HTML）

position: fixed

我已将此CSS代码添加到我的jsFiddle，一切似乎都运行正常。（可以修改样式，display: none和#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; }对此工作至关重要）

<强> CSS

<?php
$data = Array
    (
        'result' => 'Success',
        'finals' => Array
        (
            Array
                (
                    'id' => 633,
                    'name' => 'RESULT84'
                ),
            Array
                (
                    'id' => 766,
                    'name' => 'RESULT2'
                ),
            Array
                (
                    'id' => 22,
                    'name' => 'RESULT1'
                )
        )
    );

$names = array_column($data['finals'], 'name','name');
print_r($names);
?>

右键单击不会出现在正确的位置

1 个答案: