Javascript 如果父hasClass（）为空，则阻止链接上的默认值

简化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>

在不应单击的链接上工作正常，但也会影响两个后代

a

标记。为什么？我认为

parent（）

只遍历了DOM中的一个步骤

---

我通过WordPress以编程方式添加类（作为外观>菜单控制面板中的一个选项），因此直接通过类定位

a

标记并不是一个真正的选项。

您想要的是实际捕获单击

a

元素，然后检查其中的父类

只需将代码更改为：

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

---

您想要的是实际捕获单击

元素，然后检查其中的父类

只需将代码更改为：

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

“我认为parent（）只遍历了DOM中的一个步骤。”

是的。但是，您正在将单击处理程序附加到父项，并且单击事件从单击的项通过其父项、父项的父项等弹出，并且可以在该链的任何位置取消。因此，您的代码将取消该父元素中所有锚点的所有单击

请尝试以下方法：

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

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

“我认为parent（）只遍历了DOM中的一个步骤。”

是的。但是，您正在将单击处理程序附加到父项，并且单击事件从单击的项通过其父项、父项的父项等弹出，并且可以在该链的任何位置取消。因此，您的代码将取消该父元素中所有锚点的所有单击

请尝试以下方法：

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

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

$（'li>a'）。单击（函数（e）{
if（$（this）.parent（）.hasClass（'no-link'））{
console.log（'父类没有链接'）
e、 预防默认值（）
}
});









$（'li>a'）。单击（函数（e）{
if（$（this）.parent（）.hasClass（'no-link'））{
console.log（'父类没有链接'）
e、 预防默认值（）
}
});








简单的解决方案是最好的-只需停止传播：

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

简单的解决方案是最好的-只需停止传播：

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

不，那不是个好办法
stopPropagation
会中断事件流，如果您想向任何一个祖先添加一些事件侦听器，这也会带来麻烦，如果您忘记添加了
stopPropagation
@strah，则调试非常困难。我使用stopPropagation仅用于此特定情况，但是你有权利-如果这段代码将被扩展，StopRopagation可能会导致问题。不，这不是一个好的解决方案
stopPropagation
会中断事件流，如果您想向任何一个祖先添加一些事件侦听器，这也会带来麻烦，如果您忘记添加了
stopPropagation
@strah，则调试非常困难。我使用stopPropagation仅用于此特定情况，但是你有权利-如果这段代码将被扩展，StopRopagation可能会导致问题。啊。我知道这是一件简单而明显的事情，但我就是看不到。谢谢啊。我知道这是一件简单而明显的事情，但我就是看不到。谢谢