Strano comportamento con preventDefault() e radiofonici pulsanti

Question

Vai a questa jsFiddle:

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

Sembra che il metodo preventDefault() non impedisce il pulsante di opzione cliccato da conversazione alternata (si noti che il messaggio sempre dice "Questo pulsante radio è stato controllato", indipendentemente dal suo stato precedente). Tuttavia, al termine del metodo onclick(), i pulsanti di opzione tornano ai loro stati iniziali (tranne che per la prima volta viene selezionato un pulsante di opzione).

Sembra che preventDefault() funzioni non impedendo effettivamente il controllo del pulsante di opzione, ma piuttosto restituendo il set di pulsanti al loro stato precedente. Qualcuno può spiegare questo comportamento? Mi piacerebbe essere in grado di impedire completamente la commutazione del pulsante di opzione - in questo modo ho potuto verificare accuratamente se il pulsante di opzione è stato controllato all'interno del suo metodo onclick(). Qualche idea?

Answer 1

In realtà un evento mousedown verrà generato prima e controllerà il pulsante di opzione. Puoi facilmente verificarlo tenendo premuto il pulsante del mouse su un pulsante radio. Tuttavia, quasi tutti gli elementi della GUI vengono eseguiti o modificati solo se vengono attivati ​​sia mousedown sia mouseup.

vedere questo esempio (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'); 
      }      
     }); 
    });   
}); 

Come si può vedere la mousedown s'incendia prima, e vi avviserà 'Questo pulsante di scelta non è stato verificato nel MouseDown'. L'evento click viene impedito perché l'evento in realtà mouseup viene annullato dal brutto avviso. Tuttavia, se si utilizza console.log, si noterà che click è ancora eseguito e il pulsante di opzione è ancora controllato virtualmente.

Tuttavia, se si check for active radio buttons si noterà che nessuno è attivo. Il comportamento dell'elemento click a volte è irritante, ma e.preventDefault() farà il suo lavoro, non preoccuparti.