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标签）来调用它。

我希望有人可以帮助我。

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

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

编辑：编辑小提琴，可到达here。添加了一个jquery命令来查找下一个a-tag。但是在我的服务器上，它根本不起作用（返回“＃”）并且在小提琴上，它总是返回第一个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");

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

找出右键单击的DOM元素

2 个答案: