11

看到这个jsFiddle：

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

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

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

4

1 回答 1

12

实际上，一个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仍在执行，并且单选按钮仍处于虚拟状态。

但是，如果您检查活动的单选按钮，您会注意到没有活动的单选按钮。element的行为click有时很烦人，但e.preventDefault()会做的，不用担心。

于 2012-04-12T05:54:45.253 回答