Question

见这个jsFiddle：

http://jsfiddle.net/nathanfriend/vAcpc/9/

似乎preventDefault（）方法不会阻止单击的单选按钮切换（注意消息始终表示“此单选按钮已被选中”，无论其先前状态如何）。但是，在onclick（）方法完成后，单选按钮会快速恢复到其初始状态（第一次选择单选按钮时除外）。

似乎preventDefault（）不是通过实际阻止选中单选按钮来工作，而是通过将按钮组返回到其先前状态。谁能解释这种行为？我希望能够完全阻止单选按钮被切换 - 这样我就可以准确地检查是否在其onclick（）方法中检查了单选按钮。有任何想法吗？

Answer 1

实际上，mousedown事件将首先被触发并检查您的单选按钮。您可以通过按住单选按钮轻松验证这一点。但是，如果mousedown和mouseup都被触发并成功运行，则几乎所有GUI元素都会被执行或更改。

请参阅此示例（demo）：

$(function() {
    $('[name="test"]').each(function() {
         $(this).mousedown(function(e) {
            e.preventDefault();
            if ($(this).is(':checked')) {
                alert('This radio button was checked in mousedown');                
            } else {
                alert('This radio button was not checked in mousedown');
            }                    
        });
        $(this).click(function(e) {
            e.preventDefault();
            if ($(this).is(':checked')) {
                alert('This radio button was checked');
            } else {
                alert('This radio button was not checked');
            }                    
        });
    });           
});

正如您所看到的那样mousedown首先被触发，它将发出警告'此单选按钮未在mousedown中被检查'。 click事件被阻止，因为实际的mouseup事件被讨厌的警报取消了。但是，如果您使用console.log，您会注意到click仍然执行，并且仍然会虚拟检查单选按钮。

但是，如果你check for active radio buttons，你会注意到没有一个是活跃的。 click元素的行为有时会令人恼火，但是e.preventDefault()会做它的工作，不用担心。

使用preventDefault（）和单选按钮的奇怪行为

1 个答案: