Question

There is a <label> with a <a href="#"> element inside. I’d like to prevent the default behaviour of the <a> element (i.e. navigating) but it should execute the default behaviour of the <label> element (i.e. checking the checkbox inside it).

Test case: http://jsfiddle.net/3M6WE/. Clicking foo toggles the checkbox. Clicking bar does not navigate but neither toggles the checkbox.

How can I have the <a> element not navigate but have it toggle the checkbox? I’d like to avoid hacks like toggling the checkbox manually. I’m looking for a “partly” preventDefault, if available.

Answer 1

you could trigger the click of the parent element (the label):

http://jsfiddle.net/3M6WE/11/

$("a").on("click", function(e) {
    e.stopPropagation();
    $(this).parent().click();
    // do stuff...
    e.preventDefault();
});

then do some magic and finally call preventDefault();