javascript - preventDefault() 和单选按钮的奇怪行为

Question

查看这个 jsFiddle:

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

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

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

Answer 1

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

请参阅此示例 ( 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() 会完成它的工作，不用担心。