與preventDefault（）方法和單選按鈕的奇怪行爲

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被最早被解僱，它會提醒「這單選按鈕並沒有在鼠標按下檢查」。 click事件被阻止，因爲實際上mouseup事件被惡意警報取消。但是，如果您使用console.log，則您會注意到click仍然被執行，單選按鈕仍然被虛擬檢查。

但是，如果你check for active radio buttons你會注意到沒有活動。 click元素的行爲有時令人惱火，但e.preventDefault()會做它的工作，不用擔心。