Question

In this scenario (your basic catalog), there are multiple <div>s, each containing an item photo and some text. The item photo is a link. One can click the photo, and the link takes you to that item …

<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>

And consider this jquery:

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

With this, clicking “Item 100” will trigger the link. However, I don’t want to interfere with the standard “click a link” behavior (when the image is clicked) because users ofter press modifier keys to open a page in a new tab, and each browser seems to handle javascript opened windows differently.

So… how does one open a window ONLY of the user clicks something that ISN’T a link? I’m going for something like this (which obviously doesn’t work)…

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

Answer 1

You could use jQuery’s stopPropagation method, so that when a user clicks the real link, the click event doesn’t reach the div.

Something like :

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

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

That being said, if you’re using an HTML5 Doctype, you could simply wrap you’re whole “item” inside an <a> tag. No more need for javascript in this case. See reference here : http://html5doctor.com/block-level-links-in-html-5/