23

私はIE8（8.0.7601.17514）で作業することを余儀なくされており、この簡単なページがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form action=".">
    <input type="radio" name="rad" value="1" onchange="alert(1);"/>
    <input type="radio" name="rad" value="0" onchange="alert(0);" checked="checked"/>
</form>
<a href="http://google.com">some dummy link</a>
</body>
</html>

私が期待しているのは、2 番目のラジオ ボタンが選択されているので、最初のラジオ ボタンをクリックするとすぐにアラートが発生することです。これはFFでうまく機能します。

実際には、最初のラジオをクリックしても何も起こりません。次に、要素がぼやけている場合 (たとえば、別の場所、他のラジオ、ページ内のリンクなどをクリックした場合)、アラートが発生します。

これに対する回避策はありますか?

編集：

明らかに、この動作はW3C 仕様に正確に従っています

変化する

change イベントは、コントロールが入力フォーカスを失い、フォーカスを取得してからその値が変更されたときに発生します。このイベントは、INPUT、SELECT、および TEXTAREA に対して有効です。エレメント。

(@mu-is-too-short に感謝)。

これを回避するには、onclick ブラー + フォーカスを追加します。

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
4

3 に答える 3

29

Internet Explorer（少なくともIE8まで）では、ラジオボタンまたはチェックボックスをクリックして値を変更しても、入力がフォーカスを失うまで、実際にはonChangeイベントはトリガーされません。

したがって、どういうわけか自分でぼかしイベントをトリガーする必要があります。1つの提案は、次のような関数を持つことです。

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

これでonchangeイベントがトリガーされるはずですが、ご覧のとおり、冗長なコードであるため、onclickイベントハンドラーを使用する方が適切です。

より良い解決策は、これらすべての癖を処理するjqueryのような最新のjavascriptライブラリを使用することです。

于 2012-05-14T07:31:25.103 に答える
8

技術的には、IEは実際にこれを正しく理解しました。細かい仕様から：

変化する

変更イベントは、コントロールが入力フォーカスを失い、フォーカスを取得してからその値が変更された場合に発生します。このイベントは、INPUT、SELECT、およびTEXTAREAで有効です。エレメント。

したがって、変更イベントがトリガーされるためには、仕様では、要素がフォーカスを失う必要があると規定されています（つまり、ぼかしが必要です）。通常の問題は、クリックハンドラーを使用するか、他の人が提案しているようにぼかしを強制することです。

于 2012-05-14T07:32:32.593 に答える
2

onclick を使用しますが、つまり、値 (またはチェックされた属性) が変更される前にイベント ハンドラーを呼び出します msdn

于 2012-05-14T07:24:04.057 に答える