等效于explicitOriginalTarget 事件参数的跨浏览器答案

【问题标题】：Crossbrowser equivalent of explicitOriginalTarget event parameter等效于explicitOriginalTarget 事件参数的跨浏览器
【发布时间】：2008-10-07 18:48:59
【问题描述】：

有人知道explicitOriginalTarget 事件参数的跨浏览器等效吗？这个参数是 Mozilla 特定的，它给了我导致模糊的元素。假设我的页面上有一个文本输入和一个链接。文本输入具有焦点。如果我点击链接，文本输入的 blur 事件会通过 explicitOriginalTarget 参数为我提供 Firefox 中的链接元素。

我正在扩展 Autocompleter.Base 的 onBlur 方法，以便在搜索字段失去对给定元素的焦点时不隐藏搜索结果。默认情况下，如果搜索字段失去对任何元素的焦点，onBlur 方法会隐藏。

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap(
function(origfunc, ev) {
    var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode: ev.explicitOriginalTarget); // FIX: This works only in firefox because of event's explicitOriginalTarget property
    var callOriginalFunction = true;
    for (i = 0; i < obj.options.validEventElements.length; i++) {
        if ($(obj.options.validEventElements[i])) {
            if (newTargetElement.descendantOf($(obj.options.validEventElements[i])) == true || newTargetElement == $(obj.options.validEventElements[i])) {
                callOriginalFunction = false;
                break;
            }
        }
    }
    if (callOriginalFunction) {
        return origFunc(ev);
    }
}
);


new Ajax.Autocompleter("search-field", "search-results", 'getresults.php', { validEventElements: ['search-field','result-count'] });

谢谢。

【问题讨论】：

标签： javascript events cross-browser scriptaculous

【解决方案1】：

除了基于 Gecko 的浏览器之外，没有与 explicitOriginalTarget 等效的选项。在 Gecko 中，这是一个内部属性，不应由应用程序开发人员（可能由 XBL 绑定编写者）使用。

【讨论】：

谢谢谢尔盖。也许我应该开始使用事件委托编写自己的方法，而不是尝试扩展 Autocompleter 的 onBlur 方法。通过事件委托和使用一些全局变量，我可以解决这个问题。

【解决方案2】：

2015 更新...您可以在 Chrome 上使用 event.relatedTarget。这么基本的东西，希望其他浏览器也能效仿……

【讨论】：

不幸的是，截至 2015 年 7 月，Firefox 似乎不再拥有或公开 .explicitOriginalTarget，也没有实施 .relatedTarget。bugzilla.mozilla.org/show_bug.cgi?id=962251
@JudahHimango Firefox 55 仍然支持explicitOriginalTarget。关于relatedTarget，完全不一样。

【解决方案3】：

Mozilla 的 .explicitOriginalTarget 在 IE 中的大致等价物是 document.activeElement。我说粗略的等效是因为它有时会根据您的情况在 DOM 节点树中返回稍微不同的级别，但它仍然是一个有用的工具。不幸的是，我仍在寻找与 Google Chrome 相当的版本。

【讨论】：

【解决方案4】：

IE srcElement 不包含与 FF explicitOriginalTarget 相同的元素。很容易看出这一点：如果您有一个带有onClick 操作的按钮字段和一个带有onChange 操作的文本字段，请更改文本字段并将光标直接移动到按钮并单击它。此时，IE srcElement 将成为文本字段，而explicitOriginalTarget 将成为按钮字段。对于 IE，您可以从 event.x 和 event.y 属性中获取鼠标点击的 x,y 坐标。

不幸的是，Chrome 浏览器既不提供explicitOriginalTarget，也不提供鼠标坐标。您可以自行决定从哪里触发 onChange 事件。为此，明智地使用mousemove 和mouseout 事件可以提供鼠标跟踪，然后可以在onChange 处理程序中对其进行检查。

【讨论】：

【解决方案5】：

看起来它更适合扩展编写者而不是网页设计...

我会观察两个目标（或潜在目标）上的模糊/聚焦事件并分享他们的信息。
实际上，确切的实现可能取决于目的。

【讨论】：

我也想过在两个目标上观看模糊/焦点事件，但如果 Firefox 有一个特定的参数 (explicitOriginalTarget)，也许其他浏览器也有。也许不是参数，而是 hack。

【解决方案6】：

对于 IE，你可以使用srcElement，并强制它。

if( !selectTag.explicitOriginalTarget )
    selectTag.explicitOriginalTarget = selectTag.srcElement;

【讨论】：