relatedTarget的JQuery Mobile焦点事件在Safari中返回不正确的结果

Question

根据这个：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. 点击TextArea
2. 点击标题
上的“右”按钮

预期结果（见Opera）

歌剧：

的Safari： （出于某种原因，Safari指向主页面作为将要聚焦的主页面）

我试图隐藏/显示标题取决于我使用的文本区域是否获得焦点，这是一个示例：http://jsfiddle.net/DMINATOR/LLcpR/

问题

这是jquery（移动）还是Safari本身的错误？ 有没有解决方法，所以我可以找到下一个重点的按钮？

Answer 1

经过一些研究，似乎这是Mac OS（桌面和移动设备）的问题。

我做了一个小例子来证明按钮没有收到焦点事件！ （适用于Opera，Chrome，Firefox（在Windows上，但不适用于Mac OS X上的Safari）：http://jsfiddle.net/DMINATOR/7EtJD/

<div id="foo" data-role="page">

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
     <p>Click here:</p>
    <input type="button" data-custom-selector-attribute="true" name="btnTest" class="my-custom-selector-class" id="btnTest" value="Test" />
    <p id="focus-attribute-result"></p>
    <p id="focus-class-result"></p>
    <p id="click-attribute-result"></p>
    <p id="click-class-result"></p>
</div><!-- /content -->

$(document).on('focus', "input[data-custom-selector-attribute='true']", function (e) {
$("#focus-attribute-result").text("Focus - Got attribute selector!");
});

$(document).on('focus', ".my-custom-selector-class", function (e) {
$("#focus-class-result").text("Focus - Got class selector!");
});

$(document).on('click', "input[data-custom-selector-attribute='true']", function (e) {
$("#click-attribute-result").text("Click - Got attribute selector!");
});

$(document).on('click', ".my-custom-selector-class", function (e) {
$("#click-class-result").text("Click - Got class selector!");
});

为jQuery创建了一个错误报告，但它已关闭，因为它不是jQuery本身的问题：http://bugs.jquery.com/ticket/7768

目前它正在等待Web Kit开发人员（Apple） https://bugs.webkit.org/show_bug.cgi?id=22261

  

自首次报告此错误以来已有4.5年了。据推测，修复很简单（我查看了补丁）但似乎苹果人（Darian，Alexey等）不能同意它并且争论仍在继续。这使得webkit与Windows上的其他内容不同。

     

我不关心Mac或Windows上的Safari，但遗憾的是这会影响Windows上的Chrome，我很关心。见Daniel的评论＃20。我强烈要求苹果公司对此有点开放。它会影响最终用户。

这实际上已在Chrome中修复（https://code.google.com/p/chromium/issues/detail?id=89708），但尚未在Safari中修复。