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

Question

有没有人知道与explicitOriginalTarget事件参数对应的跨浏览器等效项？该参数是Mozilla特定的，它给出导致模糊的元素。假设我在页面上有一个文本输入和一个链接，文本输入具有焦点。如果我单击链接，则Firefox通过explicitOriginalTarget参数在文本输入的失焦事件中给出链接元素。

我正在扩展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'] });

谢谢。

- Mert Hurturk

Answer 1

在除了基于Gecko的浏览器之外，没有与explicitOriginalTarget相当的属性。在Gecko中，这是一个内部属性，不应该被应用程序开发人员使用（也许可以由XBL绑定编写者使用）。

- Sergey Ilinsky

---

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

Answer 2

2015年的更新......在Chrome浏览器中，您可以使用event.relatedTarget。这是一件非常基本的事情，希望其他浏览器也能跟进...

- ss ulrey

---

很遗憾，截至2015年7月，Firefox似乎不再具有或暴露.explicitOriginalTarget，也尚未实现.relatedTarget。https://bugzilla.mozilla.org/show_bug.cgi?id=962251 - Judah Gabriel Himango

@JudahHimango Firefox 55仍支持explicitOriginalTarget。 关于relatedTarget，它完全不同。 - icl7126

Answer 3

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

- WMSigEp

Answer 4

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

不幸的是，Chrome浏览器既不提供explicitOriginalTarget，也不提供单击的鼠标坐标。您需要自己找出onChange事件的触发位置。为了做到这一点，可以使用mousemove和mouseout事件提供鼠标跟踪，然后在onChange处理程序中检查它。

- Allan Rofer

Answer 5

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

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

- PhiLho

---

我也考虑在两个目标上观察模糊/聚焦事件，但如果Firefox有一个特定的参数（explicitOriginalTarget）用于此目的，其他浏览器可能也有。也许不是参数，而是一种技巧。 - matte

Answer 6

对于IE浏览器，您可以使用srcElement并强制使用它。

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

- Kotei

Answer 7

对于表单提交事件，你可以在所有现代浏览器（截至2022年）中使用submitter属性。

let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  let submitter = event.submitter; //either a form input or a submit button
});

- balping