checkbox input inside <a> tag that will only change check state and not open link

问题

I am trying to change the squirrelmail GUI so it can be used with tablets more easily. I have pretty much sorted everything, except i have a checkbox inside an <a> tag that i dont want to open link when checkbox is clicked.

It is all inside a <li> so that the whole line can be clicked on to open the mail under the cursor.

Below is the code, and here is a link to what i have so far, which works for what i want to do except for the checkbox:

http://jsfiddle.net/YEpuf/1/

    <li>
    <a href="read_body.php?account=0&amp;mailbox=INBOX&amp;passed_id=93&amp;startMessage=1"><dl>
    <dt class="col_check"><input type="checkbox" name="msg[0]" id="mbx_1_msg0" value="93"  onclick=""/></dt>
    <dd class="col_from" >name@domain.com</dd>
    <dd class="col_date">Sep 9, 2012</dd>
    <dd class="col_flag"><img src="../images/themes/outlook/msg_read.png" alt="R" title="(Read)" /></dd>
    <dd class="col_flagx"><img src="../images/themes/outlook/attach.png" alt="A" title="Attachment" /></dd>
    <dd class="col_flagx"><img src="../images/themes/outlook/transparent.png" alt="!" title="Normal priority" width="5" /></dd>
    <dd class="col_subject" >Re:&#32;test&#32;email&#32;36</dd>
    </dl></a></li>

I have used <dd> because i find it is easy to make items line up in cols, but tried <span> and <div> inside the <li> but had problems with line heights.but maybe there is a better way so any suggestions/advice would be great.

EDIT: i just tried my code in IE and Chrome, and it works fine, so looks like this is a problem with FF.. Anyways still looking for an answer !!

回答1:

The easy (and correct) answer is: don't have a checkbox in your a element. The wrong answer imho, but still may be an answer is using javascript to prevent event bubbling:

https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation

回答2:

This should do it:

var elements = document.querySelectorAll("li > a");
// You can make the query selection easier by adding a class to the anchor tags

for ( var el in elements ) {
    el.addEventListener("click", function (event) {
        event.preventDefault;
    }, false);
}

来源：https://stackoverflow.com/questions/12356435/checkbox-input-inside-a-tag-that-will-only-change-check-state-and-not-open-lin