MouseEvent.path 在 Firefox 和 Safari 中等效

Question

我正在使用 Polymer 1.0，当单击 Chrome 中的按钮时，会生成 MouseEvent。此 MouseEvent 对象有一个 path 属性，它是单击按钮的父元素的有序数组。然而，在 Firefox 和 Safari 中，生成的 click 没有 path 属性。是否有 click 对象的等效属性提供相同的信息？

Answer 1

它不可用，但如果您真的想要这个属性，那么您可以像这样扩展 Event 对象的本机原型：

if (!("path" in Event.prototype))
Object.defineProperty(Event.prototype, "path", {
  get: function() {
    var path = [];
    var currentElem = this.target;
    while (currentElem) {
      path.push(currentElem);
      currentElem = currentElem.parentElement;
    }
    if (path.indexOf(window) === -1 && path.indexOf(document) === -1)
      path.push(document);
    if (path.indexOf(window) === -1)
      path.push(window);
    return path;
  }
});

但是如果我是你，我不会扩展原型 - 我会创建一个如上所述的函数。

此外，如果您只想涵盖这些类型的事件，我会将 Event.prototype 更改为鼠标Event.prototype。

Answer 2

e.composedPath() 方法似乎是 e.path 的跨浏览器版本。它适用于 Chrome 和 Firefox。不确定 Safari。

MouseEvent.path 在 Firefox 和 Safari 中等效

MouseEvent.path equivalent in Firefox & Safari

javascript

safari

firefox

google-chrome

polymer-1.0