JQuery :: Mouse Clicks Propagating Up The DOM?

I came across some simple jQuery that does a nice job styling checkboxes but it's doing things that I wouldn't expect to work. The idea behind the code is to set the original checkbox element to display:none and then follow the checkbox element with a <label> element that has a background image of what you want the new checkbox to look like. jQuery assigns a change handler to the checkbox elements that looks at the current state and adds a new class to the label, one with a "checked" background image, if the state is going to checked and removes this class if the state is going to unchecked. The basic jQuery is:

$(document).ready(function(){
$("#member_cb").change(function(){
if($(this).is(":checked")){

[code]....

and the HTML is

<input type='checkbox' id='member_cb' class='CheckBoxClass' name='memberChecked' value='yes'/>
<label id='Label2' for='member_cb' class='CheckBoxLabelClass2' >Membership</label>

You can see it work on the pay form at [URL] by clicking any of the three checkboxes there. The thing that puzzles me is that when you click in the area where the original checkbox was, the click event seems to pass through the image that is there now and be passed on to the checkbox element that has a display:none style now. My experience with HTML has been that mouse clicks don't pass through elements. That is, if you place something over a clickable element, you can no longer click it.