How to isolate mousedown / touchstart events on custom checkbox label with anchor tag?

First, here's a screenshot for reference:

I'm trying to have a custom checkbox respond to mouse and touch events in such a way it can be toggled either by it's icon OR label, BUT when the user touches or clicks the additional information link, it should NOT trigger the checkbox to toggle on/off. These anchor tags are part of the <label> tags corresponding to their <input type="checkbox"> tags, like so:

<inputid="chkBoxID"type="checkbox" /><labelfor="chkBoxID">I agree to <a>Privacy Rules</a></label>

The problem I'm having now: when the link part is touched / clicked, the checkbox toggles and the event for the link fires (popup appears), it should only fire the link's event.

In case this matters: I've used preventDefault() and stopPropagation() to eliminate the 300ms delay on iOS (for toggling the checkboxes), but I'm not sure I've implemented correctly for this particular scenario. Perhaps I'm doing this totally the wrong way.

Which approach would you take for this?

Should I avoid using the <input type="checkbox"> tag at all and just forge a custom checkbox out of divs, CSS classes and some Javascript?