子イベントではなく親イベントのみをクリックします

Question

クリックイベントをナビゲーションに追加する必要がありますが、サブメニューではなく親イベントのみを必要とします。

私は何をすべきですか？

$(document).ready(function() { 
 
    $('nav ul li a').click(function() { 
 
    alert('test'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
     <li><a href="#">Test</a></li> 
 
     <li><a href="#">Test</a></li> 
 
     <li> 
 
      <a href="#">Test</a> 
 
      <ul> 
 
       <li><a href="#">Test</a></li> 
 
       <li><a href="#">Test</a></li> 
 
       <li><a href="#">Test</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">Test</a></li> 
 
     <li> 
 
      <a href="#">Test</a> 
 
      <ul> 
 
       <li><a href="#">Test</a></li> 
 
       <li><a href="#">Test</a></li> 
 
       <li><a href="#">Test</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav>

https://jsfiddle.net/usbwLkjp/

Answer 1

$(document).ready(function() { 
 
      
 
    $('nav>ul>li>a').click(function(e) { 
 
    
 
    alert('test'); 
 
    
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
     <ul> 
 
      <li><a href="#">Test</a></li> 
 
      <li><a href="#">Test</a></li> 
 
      <li> 
 
       <a href="#">Test</a> 
 
       <ul> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Test</a></li> 
 
      <li> 
 
       <a href="#">Test</a> 
 
       <ul> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </nav>

Answer 2

は次のように直接の子孫をターゲットに、あなたのCSSセレクタを変更し、この

$('nav > ul > li > a') 

Answer 3

あなたは直接の子供にターゲットに >を矢印使用することができます

$(document).ready(function() {    
     $('nav > ul > li > a').click(function() { 
     alert('test'); 
     });  
}); 

DEMO HERE

Answer 4

これはあなたのために働く：

$(document).ready(function() { 
 
      
 
    $('nav>ul>li>a').click(function() { 
 
    alert('test'); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
     <ul> 
 
      <li><a href="#">Test</a></li> 
 
      <li><a href="#">Test</a></li> 
 
      <li> 
 
       <a href="#">Test</a> 
 
       <ul> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Test</a></li> 
 
      <li> 
 
       <a href="#">Test</a> 
 
       <ul> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
        <li><a href="#">Test</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </nav>