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 指向主页作为将被聚焦的页面）

我正在尝试隐藏/显示标题，具体取决于我使用的文本区域是否接收焦点，这是一个示例： //jsfiddle.net/DMINATOR/LLcpR/

问题

这是 jquery（移动）或 Safari 本身中的错误吗？是否有任何解决方法，所以我可以找到接下来将聚焦的按钮？

4

1 回答 1

2

经过一番研究，这似乎是 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 年了。大概修复很简单（我查看了补丁），但似乎 Apple 人（Darian、Alexey 等）不能同意它，争论仍在继续。这使得 webkit 与 Windows 上的其他所有东西不同。

我不关心 Mac 或 Windows 上的 Safari，但遗憾的是这会影响我关心的 Windows 上的 Chrome。请参阅 Daniel 的评论 #20。我强烈敦促苹果人对此保持开放的态度。它确实会影响最终用户。

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

于 2013-12-06T17:03:13.830 回答