Clickable DIV with children links

Question

I have created a clickable div element that has a few links inside it. When I click anywhere on the div the page will go to the mail link but I want to be able to go to all the other links inside that div . I have managed to do this by calling the e.stopPropagation(); method. This works very good. You can see it in action here: http://jsfiddle.net/nfZ3y/1/

The problem is, when hold the ctrl key and click on the link (to open it on a new tab), the link will not work and the page will go to the default link (instead of the one that I just clicked on). How can I achive all of the functionalities of the child links and add a default link for my div ?

Answer 1

As people pointed out, it seems stopPropagation works differently in Firefox from the other browsers. My only suggestion is handling the click yourself:

$('.first').click(function (e) {
    var title = $(this).children('.main-link');
    var href = title.attr('href');
    if ( e.ctrlKey )
        window.open(href,"_blank");
    else
        window.location = href;
    return false;
});

$('.first a').click(function (e) {
    var title = $(this);
    var href = title.attr('href');
    if ( e.ctrlKey )
        window.open(href,"_blank");
    else
        window.location = href;
    return false;
});​

Working example on jsFiddle.

Update: for less redundancy, substitute the first handler for this:

$('.first').click(function (e) {
    $(this).children('.main-link').click();
    return false;
});