リンクの防止のデフォルト親hasClass（あれば）

Question

簡体HTML：

<ul> 
    <li class="no-link"><a>Should not be clickable</a> 
     <ul> 
      <li><a>Should be clickable</a></li> 
      <li><a>Should be clickable</a></li> 
     </ul> 
    </li> 
</ul> 

Javascriptを：

jQuery(document).ready(function($) { 

    $('a').parent().click(function(e) { 
     if($(this).hasClass('no-link')){ 
      e.preventDefault(); 
     } 
    }); 
}) 

がクリック可能ではありませんリンクを正常に動作しますが、また2子孫aのタグに影響を与えます。どうして？私はparent()がDOM内で一歩進んだと考えました。

WordPressでAppearance> Menusコントロールパネルのオプションとしてプログラムでクラスを追加していますので、aタグをクラスを介して直接ターゲティングすることは実際の選択肢ではありません。

Answer 1

実際には、a要素のクリックをキャプチャして、その内部の親クラスを確認してください。

だけにコードを変更：

$('a').click(function(e) { 
    if($(this).parent().hasClass('no-link')){ 
     e.preventDefault(); 
    } 
}); 

Answer 2

は、 "私は、DOM内の単一のステップアップトラバース）（親を思いました。"

です。しかし、クリックハンドラを親に付け加え、クリックしたアイテムからその親、親の親などをクリックしてイベントをクリックすると、そのチェーンに沿ってどこでもキャンセルできます。したがって、あなたのコードは、その親要素内のすべてのアンカーのすべてのクリックをキャンセルします。

代わりにこれを試してみてください：

ある

$('a').click(function(e) { 
    if($(this).parent().hasClass('no-link')){ 
    e.preventDefault(); 
    } 
}); 

は、アンカー・レベルでクリックイベントを処理し、クリックされたアイテムの親をテストします。

Answer 3

$('li > a').click(function(e) { 
 
     if($(this).parent().hasClass('no-link')){ 
 
      console.log('parent has class no-link') 
 
      e.preventDefault() 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="no-link"><a href="#">Should not be clickable</a> 
 
     <ul> 
 
      <li><a href="#">Should be clickable</a></li> 
 
      <li><a href="#">Should be clickable</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 4

シンプルなソリューションが最適です - ちょうど伝播を停止します。

jQuery(document).ready(function($) { 
    $('a').parent().click(function(e) { 
     e.stopPropagation(); // Preventing from event bubbling and capturing 
     if($(this).hasClass('no-link')){ 
      e.preventDefault(); 
     } 
    }); 
})