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以编程方式添加该类（作为Appearance＆gt; Menus控制面板中的一个选项），因此不能直接通过类定位a标记。

Answer 1

你想要的是实际捕获data_df元素上的点击，然后检查其中的父类。

只需将您的代码更改为：

Answer 2

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

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

确实如此。但是您将单击处理程序附加到父项，并单击事件从单击项目通过其父项，父项的父项等向上冒泡，并且可以在该链的任何位置取消。因此，您的代码会取消该父元素中所有锚点的所有点击。

请改为尝试：

HH:MM:SS

即，处理锚点级别的click事件，测试所单击项目的父级。

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

如果父hasClass（），则防止链接上的默认值

4 个答案: