单击事件仅适用于父级，不适用于子级

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

更改您的 css 选择器以像这样定位直系后代

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

Answer 2

您可以使用箭头 > 直接瞄准 child

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

DEMO HERE

Answer 3

$(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 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>

单击事件仅适用于父级，不适用于子级

Click event only for parent, not child

jquery

jquery-events