在JQuery中选择没有同一类的父元素的元素[重复]答案

【问题标题】：Selecting the element without the parent of same class in JQuery [duplicate]在JQuery中选择没有同一类的父元素的元素[重复]
【发布时间】：2017-05-19 16:36:41
【问题描述】：

我在访问 jQuery 中的元素时遇到问题。请注意，这是一个动态嵌套列表，因此触发器指向文档中。问题是当我尝试触发鼠标事件时，如果它是子事件，它也会调用父值。

<ul>
    <li class="item">list item 1</li>
    <li class="item">list item 2
        <ul>
            <li class="item">list item 9999999</li>
            <li class="item">list item 2</li>
            <li class="item">list item 3</li>
            <li class="item">list item 4</li>
            <li class="item">list item 5</li>
        </ul>
    </li>
    <li class="item">list item 3</li>
    <li class="item">list item 4</li>
    <li class="item">list item 5</li>
</ul>

<script>
    $(document).on('mouseup', '.item', function() {
        console.log($(this).text());
    });
</script>

例如，当我单击时。 'List Item 9999999' 这是控制台的输出。

list item 9999999
list item 2

我只想定位特定元素，即使它与父元素具有相同的类。

【问题讨论】：

标签： jquery

【解决方案1】：

使用event.stopPropagation() 方法阻止DOM 树中的event bubbling up。

$(document).on('mouseup', '.item', function(e) {
    e.stopPropagation();
    console.log($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">list item 1</li>
  <li class="item">list item 2
    <ul>
      <li class="item">list item 9999999</li>
      <li class="item">list item 2</li>
      <li class="item">list item 3</li>
      <li class="item">list item 4</li>
      <li class="item">list item 5</li>
    </ul>
  </li>
  <li class="item">list item 3</li>
  <li class="item">list item 4</li>
  <li class="item">list item 5</li>
</ul>

<script>
  $(document).on('mouseup', '.item', function(e) {
    e.stopPropagation();
    console.log($(this).text());
  });
</script>

参考：What is event bubbling and capturing?

【讨论】：