Clicking a checkbox in a link causes the link to the followed — how can I avoid this?

Question

I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).

How do I avoid this behaviour?

Demo (hover over one of the product images to see the checkbox):

• http://livedemo07571.prestatrend.com/category.php?id_category=9

And here’s the code in question:

<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
    <img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />

    <span class="new">New</span>

    <div class="right_block large">
        <h3 class="large">Crew Neck Jumper</h3>

        <span class="product_arrow"></span>
        <p class="availability_container"><span class="availability">Available</span></p>

        <span class="slash">&#47;</span>
        <p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>

        <p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
    </div>
</a>

Answer 1

This isn't valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.

Answer 2

If you want for-sure don't want to move it outside the <a> then you'd have to have an onclick="return false;" and add a listener with jQuery that toggles it when its clicked. I'm not sure if this would work in all browsers, and your best option is just to do it a standards friendly way.