防止默认如果父母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(); 
     } 
    }); 
}) 

正常工作会影响这两个后代a标签。为什么？我认为parent()只在DOM中走过一步。

我通过WordPress（作为外观>菜单控制面板中的选项）以编程方式添加类，所以直接通过类直接定位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(); 
    } 
}); 

也就是说，在锚级别处理click事件，测试单击项目的父。

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(); 
     } 
    }); 
})