Kinopyo Blog

jQueryのfocus()はデフォルトのフォーカス動作とそのエレメントにバインドされたイベントが実行されます。

しかしIE8とFirefoxではこのfocus()の動作が多少違います。

現象

例えば複数のinput要素があって、それぞれfocusイベントとblurイベントがバインドされたとします。

focus()を実行する前はelem1にフォーカスしていて、要素$(‘elem2′).focus()を実行すると

• Firefox 3.5.5ではelem1のblurイベントが実行した後に、elem2のfocusイベントが実行する
• IE8ではelem1のblurイベントは実行されますが、elem2には2回フォーカスするように動作します。つまり下記の動きです。
  1. elem1のblurイベント
  2. elem2のfocusイベント
  3. elem2のblurイベント
  4. elem2のfocusイベント

普通に考えたらFirefoxの動きが正しいはずですよね。
上記の3と4は余計な処理になります。

サンプルコード

$("form :input").bind("focus", function() {
	$(this).css("background-color", "gray");
	// ログを出力
		$("#result").append($(this).get(0).id + " focus event triggered.");
	}).bind("blur", function() {
	$(this).css("background-color", "");
	// ログを出力
		$("#result").append($(this).get(0).id + " blur event triggered.");
	});
$("#foo").focus();
setTimeout(focusBar, 3000);
function focusBar() {
	$("#" + document.activeElement.id).trigger('blur');
	$("#bar").focus();
};

Foo

Bar

先にfooテキストエリアにフォーカスしてくささい。

3秒後にbarテキストエリアにfocus()メソッドでフォーカスします。

その時の出力ログを見てください。

回避策

まだいい方法はつかんでません。

Googleで検索すると似たようなものはありましたが、

回避策はまだないようです。

[jQuery] Focus event firing twice in Internet Explorer