如何獲得選定的李值，而不是父李值

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') 
    }); 
});