0

これによると: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 では異なる結果が生成されます。

再現する手順

  1. テキストエリアをクリック
  2. ヘッダーの「右」ボタンをクリックします

期待される結果 (Opera を参照)

オペラ:Opera で得られた結果

Safari: ここに画像の説明を入力 (何らかの理由で、Safari はフォーカスされるページとしてメイン ページを指します)

使用しているテキスト領域がフォーカスを受け取るかどうかに応じて、ヘッダーを非表示/表示しようとしています。例を次に示します: http://jsfiddle.net/DMINATOR/LLcpR/

質問

これは jquery (モバイル) または Safari 自体のバグですか? これに対する回避策はありますか?次にフォーカスされるボタンを見つけることができますか?

4

1 に答える 1