JavaScript - 親アンカー要素のevent.defaultを防止する

Question

ネストされたタグを使用してナビゲーションの2番目（および3番目）のレベルを開く基本的なモバイルナビゲーションドロップダウンメニューを作成しました。ただし、要素はアンカータグにネストされているため、デフォルトのアンカーイベントもトリガーされます。アンカーの子要素をクリックするときに、アンカーのデフォルトイベントを防ぐ方法はありますか？

HTML

<ul class="main-menu"> 
    <li> 
     <a href="some-link.html">Some Link 
      <span class="target"></span> 
     </a> 
     <ul class="submenu"> 
      <li><a href="some-link.html">Some Link</a></li> 
      <li><a href="some-link.html">Some Link</a></li> 
      <li><a href="some-link.html">Some Link</a></li> 
     </ul> 
    </li> 
</ul> 

例のJavascript

$('span.target').on('click', function(event) { 

    $(event.target).parent().preventDefault(); 

    // Do somthing 

}); 

Answer 1

このコードを試すことができます。アンカーで子をクリックすると、親のアンカー要素のデフォルトの動作が妨げられます。私はjavascriptをここにコアを使用します。

var menuAnchor = document.querySelectorAll('.main-menu a'); 
 

 
for(var i = 0, len = menuAnchor.length; i < len; i++){ 
 
\t menuAnchor[i].addEventListener('click', function(event){ 
 
\t \t if(event.target != this) event.preventDefault(); 
 
\t }); 
 
}

Answer 2

あなたはイベントの伝播を停止し、それがデフォルトの動作です取り消すことができます。この参照してください：私はアンカータグ（A）に結合していた場合には、コメントで述べたように

$('span.target').on('click', function(event) { 
 
    event.stopPropagation(); 
 
    event.preventDefault(); 
 
    
 
    // the rest of your code here... 
 
});

を、私は、私の「自動」ワークフローの一部として、これらの2行を追加し、 （preventDefault（））、およびstopPropagationを親要素のバインドされたイベントがトリガーされるのを避けるために、ページから移動するデフォルトの動作を防ぎます。