如何获得选定的李值，而不是父李值

Question

在点击2级李的我想获得特定的李值。

<li><span class="classSpan"> Level 
     <ul> 
     <li> <span class="classSpan"> Level 1 Item 1 
     <ul> 
     <li><span class="classSpan">Level 2 Item 1</span</li> 
     <li><span class="classSpan">Level 2 Item 2</span</li> 
     </ul> 
     </span> 
     </li> 
     </ul> 
     </span> 
    </li> 

以下事件将触发3倍，而不是一次（火对所有的父母）。它只能射击一次，仅适用于选定的锂。

$('.classSpan').click(function (e) { 
    alert('click')     
    }); 

Answer 1

这是因为事件冒泡/传播父项。使用e.stopPropagation()到冒泡和触发额外的事件回调停止：

$('.classSpan').click(function (e) { 
    e.stopPropagation(); 
    console.log('click')     
}); 

证明的概念：

$(function() { 
 
    $('.classSpan').click(function(e) { 
 
    e.stopPropagation(); 
 
    console.log('click') 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <span class="classSpan"> 
 
     Level 
 
     <ul> 
 
     <li> 
 
      <span class="classSpan"> 
 
      Level 1 Item 1 
 
      <ul> 
 
       <li><span class="classSpan">Level 2 Item 1</span></li> 
 
       <li><span class="classSpan">Level 2 Item 2</span></li> 
 
      </ul> 
 
      </span> 
 
     </li> 
 
     </ul> 
 
    </span> 
 
    </li> 
 
</ul>

一些提示：

• 你可能想要修正您的标记：请勿包裹您的<ul>在<span>，但是让它成为兄弟姐妹。
• 停止使用alert进行调试：它实际上停止了该线程。改为使用console.log()，然后打开您的开发人员工具。

Answer 2

在这里，你去。你的跨度让他们都在里面。所以当你点击它们时，这会导致点击它。

<li><span class="classSpan"> Level</span> 
     <ul> 
     <li> <span class="classSpan"> Level 1 Item 1 </span> 
     <ul> 
     <li><span class="classSpan">Level 2 Item 1</span></li> 
     <li><span class="classSpan">Level 2 Item 2</span></li> 
     </ul> 
     </li> 
     </ul> 
    </li> 

    $(document).ready(function(){ 
    $('.classSpan').click(function (e) { 
    var x = $(this).text() 
    alert(x)     
    }); 
}); 

Answer 3

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256 DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

需要防止当前事件的传播在捕获和冒泡phases.you需要停止e.stopPropagation（）;

<ul> 
    <li> 
     <span class="classSpan"> Level 
     <ul> 
      <li> 
      <span class="classSpan"> Level 1 
      <ul> 
       <li><span class="classSpan">Level 1 Item 1</span></li> 
       <li><span class="classSpan">Level 1 Item 2</span></li> 
      </ul> 
      </span> 
     </li> 
    </ul> 
    </span> 
</li> 
</ul> 

脚本

$(function() { 
    $('.classSpan').click(function(e) { 
     e.stopPropagation(); 
     var data = $(this).text() 
    console.log(data + 'your li text get') 
    }); 
});