触发下一个事件，但之后不触发

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 w/ 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) .

Thanks, Joe

Answer 1

Try stopping the event from propagating at the label.

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

Answer 2

你可以使用$（ELEM）。一（FN） - http://api.jquery.com/one/

Answer 3

Maybe you should change your html to:

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

and use no javascript at all?

Answer 4

Well, if you are allowed to change the html on client-side, you can always move the links outside the label like this,

$(document).ready(function(){ 
    $('label').find('a').each(function(){
        var $anchor = $(this);        
        $(this).closest('label').after($anchor);
    });
});​

demo

Answer 5

This one:

<label> test <a href="#">Test</a> <input type="checkbox" name="check[]" /></label>

Or even:

<label for="test1"> test <a href="#">Test</a> <input type="checkbox" name="test1" id="test1" class="checkbox" /></label>

And js:

$('a').click(function(e){
    var t=$(this);
    window.open(t.attr('href'), t.attr('target'));
    return false;
});

Works for me. Maybe there is smth that interfere with your script?

Answer 6

Try using .one() instead of .click() :

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

Answer 7

KISS

$(document).ready(function(){
    $('label a').click(function(e){
        open($(this).attr('href'), $(this).attr('target'));
        $(this).parent().click(); //Click the label again to reverse the effects of the first click.
        return false;
    });
});