title: JQuery Mobile focusout event for relatedTarget returns incorrect result in Safari
body: <p>According to this: <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/focusout" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/Reference/Events/focusout</a> </p>
  
  <blockquote>
    <p>relatedTarget (Read only) - EventTarget (DOM element) - event target receiving focus.</p>
  </blockquote>
  
  <p>I assume that eventObject.relatedTarget should point to the element that will receive the focus.</p>
  
  <h2>Example</h2>
  
  <p>Here is a code that i am using: <a href="http://jsfiddle.net/DMINATOR/L38pG/" rel="nofollow noreferrer">http://jsfiddle.net/DMINATOR/L38pG/</a> </p>
  
  <p></p>
  
  <pre><code>&lt;div data-role="header"&gt;
      &lt;h1&gt;Page Title&lt;/h1&gt;
  &lt;/div&gt;&lt;!-- /header --&gt;
  
  &lt;div data-role="content"&gt;   
       &lt;p&gt;Click here: &lt;textarea id="js-result" style="width:80%;vertical-align:top"&gt;&lt;/textarea&gt;&lt;/p&gt;
      &lt;div&gt;Result &lt;p id="result-of-click"&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;div data-role="footer"&gt;
      &lt;h4&gt;Page Footer&lt;/h4&gt;
       &lt;div data-role="controlgroup" data-type="horizontal"&gt;
       &lt;input data-icon="arrow-l" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveLeft" value="Left" /&gt;
       &lt;input data-icon="arrow-r" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveRight" value="Right" /&gt;
       &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /footer --&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS:</p>
  
  <pre><code>$("#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);
  </code></pre>
  
  <p>});</p>
  
  <p>Running the same code with different browsers: Opera and Safari produce different results.</p>
  
  <h2>Steps to reproduce</h2>
  
  <ol>
  <li>Click on TextArea</li>
  <li>Click on button "Right" on the header</li>
  </ol>
  
  <p>Expected result (see Opera)</p>
  
  <p>Opera:<img src="https://i.stack.imgur.com/ZefQF.png" alt="Results obtained in Opera"></p>
  
  <p>Safari:<img src="https://i.stack.imgur.com/HlMGU.png" alt="enter image description here">
  (For some reason Safari points to the main page as the one that will be focused)</p>
  
  <p>I am trying to hide/show the header depending if the text area i am using receives focus or not, here is an example: <a href="http://jsfiddle.net/DMINATOR/LLcpR/" rel="nofollow noreferrer">http://jsfiddle.net/DMINATOR/LLcpR/</a></p>
  
  <h2>Question</h2>
  
  <p>Is this a bug in jquery (mobile) or Safari itself ?
  Is there any workaround for this, so i could find the button that will be focused next ?</p>