可点击的LI否决了LI内的链接
我有一些LI信息,包括一些链接。我希望jQuery使LI可点击,但也保留LI中的链接。可点击的LI否决了LI内的链接
可点击部分工作。我只需要内部的链接就可以工作。
注意:如果您右键单击并选择“在新选项卡中打开”,它们将工作。
HTML
<ul id="onskeliste">
<li url="http://www.dr.dk">Some info with links <a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
</ul>
jQuery的
$(document).ready(function() {
$("#onskeliste li").click(
function()
{
window.location = $(this).attr("url");
return false;
});
})(jQuery);
我发现一个问题simular这里,但它似乎并没有解决我的问题。 jQuery DIV click, with anchors
你能帮助我吗? :-)
预先感谢您...
您遇到的问题是由event propagation造成的。 单击< a/>标记将标记最多标记为< li/>标记,因此会导致li的click
事件“取代”链接的点击。
基本上,点击链接后立即发生点击。就像您点击了某个网站的链接,然后在浏览器有机会更改网页之前点击了指向其他网站的链接。
解决这个问题的方法是阻止事件冒泡到< li/>,从而防止它改变窗口的位置。
我建议使用event.stopPropagation()
在< A/>标签,就像这样:
$('#onskeliste li a').click(function(e) {
e.stopPropagation();
});
这个解决方案像一个魅力工作,并与最少的代码 - 因此,这是我接受的解决方案... :-) – 2010-04-13 12:23:37
使用事件目标,如:
$("#onskeliste li").bind('click', function(e){
switch(e.target.nodeName){
case 'LI':{
e.preventDefault();
e.stopPropagation();
window.location = $(e.target).attr('url');
break;
}
case 'A':{
// do something
break;
}
}
});
我无法让它工作安迪。 “case'div':{”做什么?我应该把“window.location = $(this).attr(”url“);”你在哪里写过“做某事”? 你能插入我的信息如上,以更好地说明你的想法? – 2010-04-13 07:48:52
我其实已经这样做了。您可以删除'DIV'部分,这只是'nodeName'可以包含任何DOM元素的示例。对你来说有趣的部分是'A'封闭。应该做这项工作。 – jAndy 2010-04-13 08:17:43
Doh,我其实首先不明白。我编辑了现在应该做的伎俩的代码。但要小心,使用自定义属性标记可能会导致一些麻烦。 – jAndy 2010-04-13 12:08:20
可你只需要改变的标记了这个,而不是JS写这个?
<ul id="onskeliste">
<li>
<a href="http://www.dr.dk">Some info with links</a>
<a href="http://www.imerco.dk" target="_blank">Imerco</a></a>
</li>
</ul>
正如@GeReV说,这是事件传播。
$(document).ready(function() {
$('#onskeliste li').click(function(e) {
if ($(e.target).is(':not(a)')) {
window.location = $(this).attr('url');
return false;
}
});
})(jQuery);
这看着你点击什么,如果它不是在列表元素上的url
属性,它看起来的链接。如果它是一个链接,它会正常链接。
这是不好的做法,并不是逐步增强网页,只是你知道。 – 2010-04-13 12:14:04