html - 标记内的复选框输入，只会更改检查状态而不打开链接

Question

我正在尝试更改 squirrelmail GUI，以便它可以更轻松地与平板电脑一起使用。我几乎已经对所有内容进行了排序，除了我在<a>标签内有一个复选框，我不想在单击复选框时打开链接。

它都在a内，<li>因此可以单击整行以打开光标下的邮件。

下面是代码，这里是我到目前为止的链接，除了复选框之外，它适用于我想要做的事情：

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>

我使用过<dd>是因为我发现在 cols 中排列项目很容易，但在内部尝试过但行高<span>有<div>问题<li>。但也许有更好的方法，所以任何建议/建议都会很棒。

编辑：我刚刚在 IE 和 Chrome 中尝试了我的代码，它运行良好，所以看起来这是 FF 的问题。无论如何仍在寻找答案！

Answer 1

a简单（且正确）的答案是：您的元素中没有复选框。错误的答案恕我直言，但仍然可能是使用javascript来防止事件冒泡的答案：

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

Answer 2

这应该这样做：

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);
}