javascript - 找出右键单击的DOM元素

Question

我使用以下代码片段构建了自定义上下文菜单:

<script type="text/javascript">
$(document).ready(function() {
    var x, y;

    document.oncontextmenu = function(e) {
        e.preventDefault();
        x = e.clientX;
        y = e.clientY;
        $("#rkm").css("left", x + "px");
        $("#rkm").css("top", y + "px");
        $("#rkm").show();
    };

    $(document).mousedown(function(e) {
        if (!(e.clientX >= x && e.clientX <= (x + $("#rkm").width()) && e.clientY >= y && e.clientY <= (y + $("#rkm").height()))) {
            $('#rkm').hide();
        }
    });
    $(window).scroll(function () {
        $('#rkm').hide();
    });
});
</script>

我在 HTML 中有以下标记:

我在一个页面上有很多 div 框，每个框都“回显”(PHP) 一些内容，其中包括 a 标签，包含特定链接(带有 ID)。现在的问题是:我能以某种方式弄清楚，在哪个 div 中右键单击以打开上下文菜单吗？因为我想在我的上下文菜单中有一个链接，其中包含一个 php 文件，必须通过传递提到的 ID(来自 a 标记)来调用它。

我希望有人能帮助我。

如果有什么问题，请随时提出。

这是一个示例 fiddle :https://jsfiddle.net/0em8wu2a/

编辑: 编辑 fiddle ，可达here .添加了一个 jquery 命令来查找下一个 a-tag。但是在我的服务器上，它根本不工作(返回“#”)并且在 fiddle 上，它总是返回第一个 div 的 url....

Answer 1

e.target 为您提供发生点击的 DOM 对象。 e.target.tagName 可以给你标签名。

$(document).ready(function () {
    var x, y;

    document.oncontextmenu = function (e) {
        e.preventDefault();
        x = e.clientX;
        y = e.clientY;
        if($(e.target).is('div'))
            var targetDiv = $(e.target).find('a');
        else
            var targetDiv = $(e.target).closest('div').find('a');
        if( targetDiv !== undefined ){
            var linkVal = window.location.protocol + "//" + window.location.host + "/" + targetDiv.attr('href');
            var link = $('<a>')
                        .attr('href',linkVal)
                        .text(linkVal);
            console.log(link);
            $("#rkm").empty()
                .append(link)
                .css({
                    "left": x + "px",
                    "top": y + "px"
                })
                .show();
        }
    };

    $(document).mousedown(function (e) {
        if (!(e.clientX >= x && e.clientX <= (x + $("#rkm").width()) && e.clientY >= y && e.clientY <= (y + $("#rkm").height()))) {
            $('#rkm').hide();
        }
    });
    $(window).scroll(function () {
        $('#rkm').hide();
    });
});

div#rkm {
    position: fixed;
    display: none;
    z-index: 1000;
    background-color:black;
}
div#rkm a {
    display: block;
    margin: 2px;
    font-size:23px;
    color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div> <a href="test.php?id=1">div1</a>

    <p>....
        <br/>......
        <br/>
    </p>
</div>
<br/>
<br/>
<hr/>
<div> <a href="test.php?id=2">div2</a>

    <p>....
        <br/>......
        <br/>
    </p>
</div>
<div id="rkm"> <a href="#">Menüeintrag</a>

</div>