jQuery - 右键单击​​它时获取嵌套的单个<li>元素的id

Question

我发现了很多关于此的问题，但是我在获取嵌套li元素的单个ID时遇到问题，而我无法找到它的答案。这是我的代码：

$(function() {
  $('ul').on('contextmenu', 'li', function(e) {
    e.preventDefault();
    console.log(this.id);
 });

这是我的HTML：

<ul id="u-main-ul">
    <li id="1"> 1
        <ul id="u-1">
            <li id="11">11</li>
        </ul>
    </li>
</ul>

问题在于，当我右键单击带有li的{​​{1}}元素时，它会在控制台上写入＆＃34; 1 11＆＃34;。点击它显示的一个id="11"元素以及放置在点击的所有其他li标记之前的ID。

我想仅获取右键单击的li标记的ID，而不是其他内容。

Answer 1

你需要阻止事件冒泡树：

＆＃13;

＆＃13;

$('ul').on('contextmenu', 'li', function(e) {
  e.preventDefault();
  e.stopPropagation();
  
  console.log(this.id);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul id="u-main-ul">
  <li id="1">1
    <ul id="u-1">
      <li id="11">11</li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

有关详细信息，请参阅the documentation。

Answer 2

与stopPropagation()一样尝试

$(function() {
    $('ul').on('contextmenu', 'li', function(e) { 
      e.stopPropagation();
      console.log(this.id);
   })
});

请参阅JSFiddle