停止 event.preventDefault 应用于所有链接

Question

我有一个 CSS 菜单悬停在 iPad 上不起作用。环顾四周，我在 SO 上发现了这个 answer。为了触发悬停，我在顶层链接上设置了一个 event.preventDefault，效果很好。然而，这将应用于菜单下的所有链接，这意味着您无法浏览网站。

我创建了一个jsFiddle。

我怎样才能使任何带有 class .menu-item-has-children 的事件都被阻止，但对于 class 下的任何其他 <a></a> 是有效的。

Unfortunately/annoyingly 无法编辑 HTML 标记

这是我的代码：

HTML

<nav id="top-menu">
<ul>
    <li class="menu-item-has-children"><a>Link 1</a>
        <ul>
            <li><a href="http://www.google.co.uk">Google</a></li>
            <li class="menu-item-has-children"><a href="http://www.google.co.uk">Google</a>
                <ul>
                   <li><a href="#">Google 1</a></li>
                   <li><a href="#">Google 1</a></li>
                   <li><a href="#">Google 1</a></li>
                   <li><a href="#">Google 1</a></li>
                </ul>
            </li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Link 2</a>
       <ul>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Link 3</a>
        <ul>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a>Link 4</a>
        <ul>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Google</a></li>
        </ul>
    </li>
</ul>

jQuery:

$("#top-menu .menu-item-has-children a").click(function( event ) {
    event.preventDefault();
    console.log('clicked');
});

Answer 1

添加一个> (CSS Direct Descendant Selector):

$("#top-menu .menu-item-has-children > a").click(function( event ) {
    event.preventDefault();
    console.log('clicked');
});

仅选择 <a/> 标签，这些标签是 menu-item-has-children 的直接后代。

例如，在此代码块中，它选择了 'Link 2' 锚点，而不是任何 'Google' 锚点：

<li class="menu-item-has-children"><a>Link 2</a>
   <ul>
        <li><a href="#">Google</a></li>
        <li><a href="#">Google</a></li>
        <li><a href="#">Google</a></li>
        <li><a href="#">Google</a></li>
    </ul>
</li>

停止 event.preventDefault 应用于所有链接

stop event.preventDefault being applied to all links

html

jquery

javascript-events