2012-04-12 20 views
8

このjsFiddleを参照してください:でpreventDefault(と奇妙な行動)とラジオボタン

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

でpreventDefault()メソッドは、常に(トグルからの通知そのメッセージをクリックしたラジオボタンを妨げないようですには、以前の状態に関係なく、「このラジオボタンがチェックされました」と表示されます)。ただし、onclick()メソッドが終了すると、ラジオボタンが最初の状態に戻ります(ただし、ラジオボタンが初めて選択された場合を除く)。

preventDefault()は実際にはラジオボタンがチェックされないようにするのではなく、ボタンのセットを元の状態に戻すだけです。誰もこの行動を説明できますか?ラジオボタンがonclick()メソッドの中でチェックされているかどうかを正確にチェックできるこの方法で、ラジオボタンがトグルされるのを完全に防ぐことができるようにしたいと思います。何か案は?

答えて

9

実際にはmousedownイベントが発生し、ラジオボタンを確認します。ラジオボタンにマウスボタンを押して、これを簡単に確認できます。しかし、ほとんどすべてのGUI要素は、mousedownmouseupの両方が起動して正常に実行された場合にのみ実行または変更されます。あなたはmousedownが最初にトリガーされます、そしてそれが通知されます見ることができるように

$(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'); 
      }      
     }); 
    });   
}); 

「このラジオボタンをマウスダウンで確認されなかった」:

は、この例(demo)を参照してください。実際にmouseupイベントが不快なアラートによってキャンセルされるため、clickイベントが防止されます。しかし、console.logを使用すると、clickがまだ実行されていて、ラジオボタンが仮想的にチェックされていることがわかります。

ただし、check for active radio buttonsの場合は、何もアクティブではないことがわかります。 click要素の動作は時々刺激的ですが、e.preventDefault()はその仕事をしますが、心配しないでください。

+0

+1、包括的。 – undefined

+0

正確に私が知る必要があったもの。ありがとうございました! –

+0

Safari 7とChrome 33で比較することができます。結果は異なり、同じ問題が発生しています。 –