找出右键单击的DOM元素 [英] Figure out DOM Element of right click

问题描述

我已经使用下面的代码片断构建了一个自定义的上下文菜单：

 < 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（）; 
}; 
 
 $ （文件）.mousedown（函数（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 标签）来调用。 p>

我希望任何人都可以帮助我。

如果有问题，请随时询问。

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

编辑：编辑小提琴，可到达此处。添加了一个jquery命令来查找下一个a-tag。但在我的服务器上，它根本不工作（返回一个＃），并在小提琴上，它总是返回第一个div的url ....

解决方案

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;显示：无; z-index：1000; background-color：black;} div＃rkm a {display：block; margin：2px;字体大小：23像素; color：white;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js>< /脚本>< 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>

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

解决方案

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>

这篇关于找出右键单击的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！