找出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 个框，每个框都是 "echoing" (PHP) 一些内容，除此之外还有一个 a 标签，包含特定的 link（带有 ID）。现在的问题是：我能以某种方式弄清楚 div 右键单击打开上下文菜单吗？因为我想在我的上下文菜单中有一个 link，包含一个 php 文件，必须通过传递提到的 ID（来自 a 标记）来调用它。

我希望有人能帮助我。

如果有什么问题，欢迎提问。

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

编辑： 编辑了 fiddle，可访问 here。添加了 jquery 命令来查找下一个 a-tag。但是在我的服务器上，它根本不工作（返回“#”）并且在 fiddle 上，它总是 returns 第一个 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>

Answer 2

终于想通了，怎么做：

我使用了以下行：

var url = $(e.target).find("a").attr("href");

所以现在我总是得到 link 的 href 属性，它属于我右键单击的 div。

找出DOM 右键单击的元素

Figure out DOM Element of right click

html

javascript

jquery

contextmenu

找出DOM 右键单击​​的元素

Figure out DOM Element of right click

html

javascript

jquery

contextmenu

找出DOM 右键单击的元素