Рисунка из 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, содержащий определенную ссылку (с идентификатором). Теперь вопрос: могу ли я как-то выяснить, в чем произошел щелчок правой кнопкой мыши, чтобы открыть контекстное меню? Потому что я хочу иметь ссылку в моем контекстном меню, содержащую php-файл, который нужно вызывать, передавая упомянутый идентификатор (из тега a).

Надеюсь, кто-нибудь может мне помочь.

Если есть какие-либо вопросы, не стесняйтесь спрашивать.

То пример скрипку: https://jsfiddle.net/0em8wu2a/

Edit: Edited скрипка, достижимы here. Добавлена ​​команда jquery для поиска следующего a-тега. Но на моем сервере он вообще не работает (возвращается «#») и на скрипке, он всегда возвращает URL-адрес первого div ....

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, который я правильно щелкнул.