I have this html snippet:

<a href="picture-big.jpg">
  <span>
    <img src="picture-small.jpg">
    <input type="checkbox" name="delete">
  </san>
</a>

And the JS part:

$('input').click(function(e) {
  e.stopPropagation();
}); 

On Mozilla, when I'm clicking on checkbox, it's stops propagation, but still goes to that anchor (picture-big.jpg).

If I use return false or e.preventDefault() (and checking checkbox with jQuery ($('input').prop('checked', true);) it does not check input.

Idea is to check checkbox without following link. On Chrome and IE it's working. But not on Mozilla.

Any ideas?

I have this html snippet:

<a href="picture-big.jpg">
  <span>
    <img src="picture-small.jpg">
    <input type="checkbox" name="delete">
  </san>
</a>

And the JS part:

$('input').click(function(e) {
  e.stopPropagation();
}); 

On Mozilla, when I'm clicking on checkbox, it's stops propagation, but still goes to that anchor (picture-big.jpg).

If I use return false or e.preventDefault() (and checking checkbox with jQuery ($('input').prop('checked', true);) it does not check input.

Idea is to check checkbox without following link. On Chrome and IE it's working. But not on Mozilla.

Any ideas?

• javascript
• jquery
• firefox

• 6 Why do you have the checkbox inside a link if it's not supposed to work as a link? Wouldn't it be easiest to just change the HTML? – JJJ Commented May 8, 2013 at 9:33
• possible duplicate of Checkbox inside an anchor click behavior – dsgriffin Commented May 8, 2013 at 10:15
• I know markup isn't best looking. Checkbox appears only on some state. And it's legacy system, so changing some parts it's not easiest thing to do. Thanks for help! – Kęstutis Commented May 8, 2013 at 10:28
• Related question: stackoverflow.com/questions/8094483/… – k0pernikus Commented Jan 6, 2015 at 17:06
• I think there is a more generic problem behind this question which is how do you click something inside of an anchor without triggering the anchor itself. And this is answered by Andrei Nemes below stackoverflow.com/a/16437392/6219628 – Romain Vincent Commented Oct 16, 2020 at 16:17

4 Answers 4

I'd suggest restructuring your markup, if that's not possible, the following would work:

$('input').click(function(e) {
    e.preventDefault();
    var that = this;    
    setTimeout(function() { that.checked = !that.checked; }, 1);    
}); 

Fiddle

stopPropagation() just stops the event from bubbling up in the dom tree, which means parents are not notified of it, but it does not stop the default action from taking place. You need to add e.preventDefault() to your code to stop it from navigating.

This is a known Firefox bug. At first, I tried solving it the JavaScript way for quite some time until I realized what should be the obvious approach:

I could afford changing the html structure far more easily. I had a nested checkbox in an anchor. Since the anchor was absolute positioned inside a relative div, it worked instantly.

<input type="checkbox" name="delete">
<a href="picture-big.jpg">
</a>

Old question, but if somebody will need an answer. So in case you cannot change the outer anchor tag, you can wrap the checkbox by your own, e.g.:

<a href="javascript:void(0);">
   <input type="checkbox">
</a>