如何根据单击的对象在右键上创建多个上下文菜单？

Question

我目前正在使用附加到$(文档)的事件，我尝试将其更改为页面上的不同元素，但没有发生任何事情。

这是基本上下文菜单的起始代码。

    $(document).bind("contextmenu", function (event) {
        event.preventDefault();
        if ($(".context-menu") != null) {
            $(".context-menu").remove();
        }
        $("<div class='context-menu'>" +
            "<ul>" +
            "<a href=javascript:null onclick=''><li>Do Something</li></a>" +
            "</ul>"+
            "</div>")
            .appendTo("body")
            .css({ top: event.pageY + "px", left: event.pageX + "px" });
    });
    $(document).bind("click", function (event) {
        $(".context-menu").remove();
    });

澄清

我不想创建上下文菜单。我正在尝试创建多个元素，每一个都是通过右键单击不同的元素触发的。

例如，如果您右键单击一个div，您将得到一个能够更改div颜色的上下文菜单，如果您右键单击文档，您将得到一个不同的上下文菜单，如果您右键单击标题，则会得到一个不同的上下文菜单。

这能办到吗？

这是我的尝试，不起作用

    $(document).bind("contextmenu", function (event) {
        event.preventDefault();

    });
    $(document).bind("click", function (event) {
        $(".context-menu").remove();
    });

    $("#divID").mousedown(function (e) {
            if (e.button == 2) {
                if ($(".context-menu") != null) {
                    $(".context-menu").remove();
                }
                $("<div class='context-menu'>" +
                    "<ul>" +
                    "<a href=javascript:null onclick=''><li>Do Somthing</li></a>" +
                    "</ul>" +
                    "</div>")
                    .appendTo("divID")
                    .css({ top: event.pageY + "px", left: event.pageX + "px" });
                return false;
            }
            return true;
        });

Answer 1

我的小提琴也许能帮你！

只是样本代码

$(document).bind("contextmenu", function (event) {
     event.preventDefault();
});

$(document).on("mousedown","#divID",function (e) {
    if ($(".context-menu").length != 0) {
        $(".context-menu").remove();
    }
    if (e.button == 2) {
        event.preventDefault();

        $("<div class='context-menu'>" +
             "<ul>" +
             "<a href=javascript:null onclick=''><li>Do Somthing</li></a>" +
             "</ul>" +
              "</div>")
        .appendTo($(this))
             .css({ top: event.pageY + "px", left: event.pageX + "px" });
        return false;
    }
    return true;
});

Jquery on

绑定事件父级但目标子

Answer 2

不为你写完整的剧本，你想

e.target.tagName或event.srcElement.tagName (取决于浏览器)

来自事件侦听器。

这将给你A，IMG，TEXTAREA等。