Question

For a page, I’ve been given a link wrapped inside a label, like this:

<label for='checkbox_elem'>
    Links to <a href='somepage.php' target='anotherwindow'>another page.</a>
</label>

When the user clicks on the link in all browser, the page is spawned in a new tab as envisioned, but in Firefox the checkbox linked to the label is also selected. This is a non-desired behavior.

I want to run some jQuery to allow the link to pop, but to kill the event thereafter. I have the following, which works, but isn’t very elegant:

$(document).ready(function(){
    $('label a').click(function(e){
        open($(this).attr('href'), $(this).attr('target'));
        return false;
    });
});

Can any of you think of a more elegant way to do this than to replicate the element’s behavior manually and kill the event?

---

As an aside, I’ve been trying with stopPropagation, but haven’t had much success.

Also, please note that the above solution does work, but I am looking for something more elegant for generically stopping events from propagating past their first call. (The first native call. If I add a callback, I still want the native element behavior to fire, but not that of its parent) .

Answer 1

Try stopping the event from propagating at the label.

$(document).ready(function(){
    $('label').click(function(e){
        e.stopPropagation();
    });
});