使用preventDefault()和单选按钮的奇怪行为

Question

看到这个jsFiddle:

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

似乎preventDefault()方法不会阻止单击的单选按钮切换(注意该消息始终显示 "此单选按钮已被选中",无论其先前状态如何).但是,在onclick()方法完成后,单选按钮会快速恢复到其初始状态(第一次选择单选按钮除外).

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

Answer 1

实际上,mousedown事件将首先被触发并检查您的单选按钮.您可以通过按住单选按钮轻松验证这一点.然而,几乎所有的GUI元素只有得到执行或改变,如果这两个mousedown和mouseup被解雇并成功运行.

看这个例子(演示):

$(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仍然执行并且仍然虚拟检查单选按钮.

但是,如果您检查活动单选按钮,您会注意到没有活动按钮.click元素的行为有时会令人恼火,但是e.preventDefault()会做它的工作,不要担心.