これによると:https://developer.mozilla.org/en-US/docs/Web/Reference/Events/focusout
relatedTarget (読み取り専用) - EventTarget (DOM 要素) - フォーカスを受け取るイベント ターゲット。
eventObject.relatedTarget は、フォーカスを受け取る要素を指す必要があると想定しています。
例
これが私が使用しているコードです: http://jsfiddle.net/DMINATOR/L38pG/
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Click here: <textarea id="js-result" style="width:80%;vertical-align:top"></textarea></p>
<div>Result <p id="result-of-click"></p></div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
<div data-role="controlgroup" data-type="horizontal">
<input data-icon="arrow-l" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveLeft" value="Left" />
<input data-icon="arrow-r" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveRight" value="Right" />
</div>
</div><!-- /footer -->
JS:
$("#js-result").focusout(function (eventObject) {
var relatedTarget = eventObject.relatedTarget;
var message = "[DEBUG] - [FOCUSOUT] - Result relatedTarget = " + relatedTarget + " id=" + relatedTarget.id;
$("#result-of-click").text(message);
console.log(message);
});
異なるブラウザーで同じコードを実行する: Opera と Safari では異なる結果が生成されます。
再現する手順
- テキストエリアをクリック
- ヘッダーの「右」ボタンをクリックします
期待される結果 (Opera を参照)
オペラ:
Safari: (何らかの理由で、Safari はフォーカスされるページとしてメイン ページを指します)
使用しているテキスト領域がフォーカスを受け取るかどうかに応じて、ヘッダーを非表示/表示しようとしています。例を次に示します: http://jsfiddle.net/DMINATOR/LLcpR/
質問
これは jquery (モバイル) または Safari 自体のバグですか? これに対する回避策はありますか?次にフォーカスされるボタンを見つけることができますか?