处理上下文菜单元素的点击（jQuery）

Question

我是 Javascript 的新人。我正在尝试使用 jQuery 创建上下文菜单。我从网上找到例子，简化并重写它。

document.oncontextmenu = function() {
  return false;
};

$(document).ready(function() {
  $(document).mousedown(function(event) {
    $('*').removeClass('selected-html-element');
    $('.context-menu').remove();
    if (event.which === 3 && $(event.target)[0].nodeName == "DIV") {
      var target = $(event.target);
      $('<div/>', {
          class: 'context-menu'
        })
        .css({
          left: event.pageX + 'px', // We set the menu position to X
          top: event.pageY + 'px' // We set the menu position to Y
        })
        .appendTo('body')
        .append(
          $('<ul/>').append('<li id="show"><a href="#">Show alert1</a></li>')
        )
        .show('fast');
    }
  });
});

function showAlert(event) {
  console.log("Message:");
  console.log(event.target);
}
$("#im").click(showAlert);
$("#show").click(showAlert);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="im" class="dial" style="height:100px; border:1px solid red; background-color:#CCFFCC;" alt="">
</div>

为了测试，我添加了 div 点击处理。它有效 - 它向控制台写入消息，但是当我单击上下文菜单的 元素时 - 控制台中没有任何内容。

当有人点击带有上下文菜单的元素时，我该怎么办？

Answer 1

我解决了我的问题。如果有人会这样做，请使用我的示例。

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="Windows-1251">
    <title>Example</title>
    <style>
        .context-menu {
            position: absolute; /* Задаем абсолютное позиционирование для нашего меню */
            display: normal; /* Изначально не показываем его */
            background-color: #fff; /* Цвет фона меню */
            border: 1px solid #333; /* Граница */
            /* Немного красивостей. Добавляем тень для нашего меню, что бы отобразить его слегка выше остальных элементов страницы: */
            -moz-box-shadow: -5px 2px 10px rgba(0,0,0,0.5); /* Для Firefox */
            -webkit-box-shadow: -5px 2px 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
            box-shadow: -5px 2px 10px rgba(0,0,0,0.5); /* Параметры тени */
        }
            /* Добавляем стили для списка которые будет находиться внутри меню и, собственно, содержать его пункты: */
            .context-menu ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
                .context-menu ul li {
                    margin: 0;
                    padding: 0;
                    background-color: #fff;
                    display: block;
                }
                    /* Стили для ссылок пунктов меню: */
                    .context-menu ul li a {
                        color: #333;
                        text-decoration: none;
                        font-size: 12px;
                        display: block;
                        padding: 5px;
                    }
                        .context-menu ul li a:hover {
                            background-color: #eee;
                        }
    </style>
</head>
<body>
    <div id="im" class="dial" style="height:100px; border:1px solid red; background-color: #CCFFCC" />

    <div id="me" class="context-menu" style="display:none;" >
        <ul>
            <li id="show"><a href="#">Show alert</a></li>
            <li id="change"><a href="#">Change color</a></li>
        </ul>
    </div>

    <script>
        document.oncontextmenu = function () { return false; };


        window.onload = function () {
            document.onmousedown = context;
            document.getElementById("show").onmousedown = showAlert;
            document.getElementById("change").onmousedown = changeColor;
        }

        function context(event) {
            if (event.which === 1) {
                document.getElementById("me").style.display = 'none';
            }
            if (event.which === 3 && event.target.nodeName == "DIV") {
                document.getElementById("me").style.display = '';
                document.getElementById("me").style.left = event.pageX + 'px';
                document.getElementById("me").style.top = event.pageY + 'px';
            }
        }

        function showAlert() {
            alert('ok');
        }
        function changeColor() {
            document.getElementById("im").style.backgroundColor = 'red';
        }
    </script>
</body>
</html>

处理上下文菜单元素的点击（jQuery）

Handling of clicks on the element of thecontext menu (on jQuery)

javascript

jquery

contextmenu