Question

我想在父元素上使用preventDefault，但我不希望它影响子元素。可以这样做吗？

我已经设置了一个JsFiddle来帮助显示我的意思： http://jsfiddle.net/StephenMeehan/FdwST/5/

我一直在摸着头几个小时，无法弄明白......

HTML ：

<ul id="SidebarNav">
<li><a href="#">Toys &amp; Games</a></li>
<li><a href="#">Audio Visual</a></li>
<li><a href="#">Electrical</a></li>
<li><a href="#">Photography</a></li>
<li><a href="http://www.google.com">Furniture (Hover over this)</a>
<ul>
<li><a href="http://www.bbc.co.uk">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>
</li>
<li><a href="#">Music</a></li>
<li><a href="#">Gadgets</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="http://www.google.com">Furniture (Hover over this)</a>
<ul>
<li><a href="http://www.bbc.co.uk">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 4</a></li>
<li><a href="#">Menu item 5</a></li>
</ul>

JavaScript的：

// This is my first attempt at writing something useful in jQuery.
$(document).ready(function() {

    $("#SidebarNav ul").hide();

    $("li:has(ul)").addClass("SubMenu");


    // preventDefault removes default events on #SidebarNav a and it's children. 
    //Is there a way to only target list items with a class of .SubMenu?
    // I want to use preventDefault only on .SubMenu a, and still be able to use the links in the drop down menu.
    $(".SubMenu a").click(function(e) {
        e.preventDefault();
    });


    // This works, but it sometimes gets confused if there's more than one drop down and the mouse is moved around too fast. Is there a way to force collapse all other SubMenu items on rollover?
    $(".SubMenu").on("hover", function() {
        $(this).children("ul").delay(100).slideToggle("fast").stop();
    });

});

Answer 1

根据我的理解，您只需向:first选择器添加.SubMenu a即可选择第一个a以防止默认行为。

所以请使用：$(".SubMenu a:first").click ....

查看:first选择器

上的jQuery documentation

编辑：A JS Fiddle为你

Answer 2

>允许您选择元素的直接子元素，使用这些元素应该可以正常工作。

所以在你的情况下如何：

$(".SubMenu > a").click(function(e) {
    e.preventDefault();
});

有关jquery直接后代选择器的更多信息，请参阅：api.jquery.com/child-selector

Answer 3

感谢ThoKra回答这个问题。我最终让这个工作了。这将在.SubMenu的所有类中找到所有第一个标签。

$(".SubMenu").find("a:first").click(function(e) {
e.preventDefault();
});

下面的JQuery只会在.SubMenu的第一个实例中找到第一个标签，我的页面有多个.SubMenu实例，所以它不太正确。

$(".SubMenu a:first").click(function(e) {
e.preventDefault();
});

希望这可以帮助任何寻找类似解决方案的人。再次感谢ThoKra。

如何控制preventDefault？

3 个答案: