如何控制preventDefault？

我想在父元素上使用preventDefault，但我不希望它影響子元素。這可以做到嗎？如何控制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(); 
    }); 

});

來源

2012-10-29 StephenMeehan

什麼，我能理解後，所有你需要的是一個:first添加到.SubMenu a選擇器只是選擇第一個a以防止默認行爲。

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

時退房jQuery documentation上:first選擇

編輯：A JS Fiddle你

來源

2012-10-29 13:08:49 ThoKra

輝煌！謝謝！ – StephenMeehan

剛試過這個 - 它的工作原理是，如果只有一個.SubMenu實例，不幸的是它不工作，如果有多個實例。有任何想法嗎？ – StephenMeehan

經過更多的頭抓撓我能夠得到這個工作 – StephenMeehan

>允許你選擇一個元素的直接子元素，玩這些應該工作。

你的情況怎麼樣

所以：

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

有關jQuery的更多信息嫡系選擇看：api.jquery.com/child-selector

來源

2012-10-29 13:08:13 silkAdmin

它不會做任何事情，因爲它是具有SubMenu類的'li'。 – ThoKra

@ThoKra更新了我的答案。 – silkAdmin

這有效，但它不應該？嗯，SubMenu> a應該只針對.SubMenu的孩子 - 明天我會繼續修補這個。我會在這裏發佈任何更新。 – StephenMeehan

感謝ThoKra回答的問題。我最終得到了這個工作。這將在.SubMenu的所有類中找到所有第一個標籤。

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

JQuery的下面將只能找到.SubMenu的第一個實例的第一標籤，我的網頁有.SubMenu的多個實例，所以這是不完全正確。

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

希望這有助於任何人尋找一個類似的解決方案。再次感謝ThoKra。

來源

2012-10-29 17:18:24 StephenMeehan

如何控制preventDefault？

回答

相關問題