Question

我在访问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>

当我点击例如。＆＃39;列出项目9999999＆＃39;这是控制台中的输出。

list item 9999999
list item 2

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

Answer 1

使用event bubbling up方法在DOM树中预防event.stopPropagation()。

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

＆＃13;

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

＆＃13;

参考：What is event bubbling and capturing?

在JQuery

1 个答案: