Figure out DOM Element of right click

问题

I have used the following Code Snippet to build a custom context-menu:

<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>

And I have the following markup in HTML:

I have a lot of div boxes on one page, every box is "echoing" (PHP) some content, among other things a a tag, containing a specific link (with an ID). Now the question is: Can I somehow figure out, in which div the right click, to open the context menu, happened? Because I want to have a link in my context menu, containing a php-file, which has to be called by passing the mentioned ID (from the a tag).

I hope anybody can help me.

If there are some questions, feel free to ask.

Thats an example fiddle: https://jsfiddle.net/0em8wu2a/

Edit: Edited the fiddle, reachable here. Added a jquery command to find the next a-tag. But on my server, it's not working at all (returning a "#") and on the fiddle, it always returns the url of the first div....

回答1:

e.target gives you the DOM object on which the click occurred. e.target.tagName can give you the tag name.

$(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>