JQuery prevendDefaultリスト内の[リンクを無効にする]（ただし、子リスト内のリンクを無効にする）

Question

無効にするリンクがあります。問題はそれがサブリストを持っているので、それらのリンクも無効にすることです。 HTMLは次のように基本的になります。

<div id="main"> 
<ul class="index"><li class="firstLI"><a href="some other URL"></a></li> 

<li class="secondLI"><a href="disableMe">Disable this Link</a> 
    <ul> 
     <li><a href="dontDisableMe">Don't Disable Me</a></li> 
     <li><a href="dontDisableMe">Don't Disable Me</a></li> 
    </ul> 
</li> 
<li>third</li></ul> 
</div> 

は私が「」「李」クラス内のsecondLIではなく、添付ULの子供たちのすべてを無効にしたいです。

私が試してみた：

function preventDefault(e) { 
     e.preventDefault()}; 

    $("#main li:nth-child(2) a").bind("click", preventDefault); 

    $(".secondLI").unbind("click", prevenDefault); 

と

$("#main li:nth-child(2) a").click(function(e) { 
    e.preventDefault(); 
    //do other stuff when a click happens 
}); 

Answer 1

は直接の子を選択> selectorを使用してください。

$("#main li:nth-child(4) > a").click(function(e) { ... 

また、リンクが1つしかない場合は、:first selectorを使用してください。

$("#main li:nth-child(4) a:first").click(function(e) { ... 

さらに、リンクやクラスを直接指定することもできます。

Answer 2

クリックイベントbubble：最初にli要素のクリックハンドラが起動されます（存在する場合）。次に親のクリックハンドラ、次に親の親のクリックハンドラなどが実行されます。このチェーン内のハンドラは、デフォルトのアクションを取り消すことができます。したがって、preventDefault（または全くイベントハンドラがない）のli liにイベントハンドラがあり、liの親のイベントハンドラがpreventDefaultの場合、デフォルトのアクションは防止されます。この周り

つの簡単な方法：

外 liのイベントハンドラで

• 、クリックのターゲット（e.target）をチェックし、それが子供ul内にない場合にのみpreventDefaultを呼び出します。
• liのイベントハンドラで、バブリング（e.stopPropagation）をキャンセルします。その方法では、親のイベントハンドラliはまったく呼び出されません。