Question

在这种情况下（您的基本目录），有多个<div>，每个都包含项目照片和一些文本。项目照片是一个链接。可以点击照片，链接会将您带到该项目......

<div class="itembox">
    <a href="/100"><img src="item_100.jpg"></a>
    Item 100
</div>
<div class="itembox">
    <a href="/101"><img src="item_101.jpg"></a>
    Item 101
</div>

考虑一下这个jquery：

$('.itembox').click(function(){
    window.location.href = $('a:first',this).attr('href');
});

这样，点击“项目100”将触发链接。但是，我不想干扰标准的“点击链接”行为（当点击图像时）因为用户按下修改键以在新标签页中打开页面，并且每个浏览器似乎以不同的方式处理javascript打开的窗口

那么......只有当用户点击不是链接的东西时，如何打开一个窗口？我想要这样的东西（显然不起作用）......

$('.itembox').click(function(){
    if ($(this).not('a')) {
        window.location.href = $('a:first',this).attr('href');
    }
});

Answer 1

jQuery选择器语法提供了：

$('.itembox :not(a)').click(...

请参阅http://api.jquery.com/not-selector/

Answer 2

您可以使用jQuery的stopPropagation方法，这样当用户点击真实链接时，点击事件就不会到达div。

类似的东西：

$('.itembox').click(function(){
    window.location.href = $('a:first',this).attr('href');
});

$('.itembox').find('a').click(function(e){
    e.stopPropagation();
})

话虽如此，如果你使用的是HTML5 Doctype，你可以简单地将整个“item”包装在<a>标签内。在这种情况下不再需要javascript。请参阅此处的参考：http://html5doctor.com/block-level-links-in-html-5/

Answer 3

要么停止传播，要么尝试获得更准确的选择......也许是这样：

HTML

<div class="itembox">
    <a href="/100"><img src="item_100.jpg"></a>
    <span>Item 100</span>
</div>
<div class="itembox">
    <a href="/101"><img src="item_101.jpg"></a>
    <span>Item 101</span>
</div>

JS

$('.itembox span').click(function() {
    // do stuff
}

除了链接，你如何定位一切？

3 个答案: