Question

首先我使用的是Vue.js和Node.js

我遇到了Firefox的问题。

我使用event.path[n].id并使用Firefox我收到错误

event.path undefined

但它在其他浏览器中运行良好。

你知道为什么吗？

Answer 1

path个对象的Event属性是非标准的。标准等价物是composedPath，这是一种方法。但它是新的。

所以你可能想尝试回到那个，例如：

var path = event.path || (event.composedPath && event.composedPath());
if (path) {
    // You got some path information
} else {
    // This browser doesn't supply path information
}

显然，如果浏览器没有提供路径信息，那么它不会给你提供路径信息，但它允许旧的方式和新的标准方式，因此它将做最好的跨浏览器。

示例：

＆＃13;

document.getElementById("target").addEventListener("click", function(e) {
  // Just for demonstration purposes
  if (e.path) {
    if (e.composedPath) {
      console.log("Supports `path` and `composedPath`");
    } else {
      console.log("Supports `path` but not `composedPath`");
    }
  } else if (e.composedPath) {
    console.log("Supports `composedPath` (but not `path`)");
  } else {
    console.log("Supports neither `path` nor `composedPath`");
  }
  
  // Per the above, get the path if we can
  var path = e.path || (e.composedPath && e.composedPath());
  
  // Show it if we got it
  if (path) {
    console.log("Path (" + path.length + ")");
    Array.prototype.forEach.call(
      path,
      function(entry) {
        console.log(entry.nodeName);
      }
    );
  }
}, false);

＆＃13;

<div id="target">Click me</div>

＆＃13;

在我的测试中（2018年5月更新），IE11和Edge都不支持path或composedPath。 Firefox支持composedPath。 Chrome支持path（这是Google最初的想法）和composedPath。

所以我认为你不能直接在IE11或Edge上获取路径信息。显然，您可以通过e.target.parentNode和后续parentNode获取路径，通常相同，但当然是path / {{ 1}}它不是总是相同（如果在触发事件之后但在调用处理程序之前修改了DOM）。

Answer 2

如果未在浏览器中实现，您可以创建自己的composPath函数：

function composedPath (el) {

    var path = [];

    while (el) {

        path.push(el);

        if (el.tagName === 'HTML') {

            path.push(document);
            path.push(window);

            return path;
       }

       el = el.parentElement;
    }
}

返回的值相当于Google Chrome的event.path。

示例：

document.getElementById('target').addEventListener('click', function(event) {

    var path = event.path || (event.composedPath && event.composedPath()) || composedPath(event.target);
});

Answer 3

此功能用作Event.composedPath()或Event.Path

的填充

function eventPath(evt) {
    var path = (evt.composedPath && evt.composedPath()) || evt.path,
        target = evt.target;

    if (path != null) {
        // Safari doesn't include Window, but it should.
        return (path.indexOf(window) < 0) ? path.concat(window) : path;
    }

    if (target === window) {
        return [window];
    }

    function getParents(node, memo) {
        memo = memo || [];
        var parentNode = node.parentNode;

        if (!parentNode) {
            return memo;
        }
        else {
            return getParents(parentNode, memo.concat(parentNode));
        }
    }

    return [target].concat(getParents(target), window);
}

Answer 4

使用composePath（）并为IE使用polyfill： https://gist.github.com/rockinghelvetica/00b9f7b5c97a16d3de75ba99192ff05c

包括上述文件或粘贴代码：

// Event.composedPath
(function(e, d, w) {
  if(!e.composedPath) {
    e.composedPath = function() {
      if (this.path) {
        return this.path;
      } 
    var target = this.target;

    this.path = [];
    while (target.parentNode !== null) {
      this.path.push(target);
      target = target.parentNode;
    }
    this.path.push(d, w);
    return this.path;
    }
  }
})(Event.prototype, document, window);

然后使用：

var path = event.path || (event.composedPath && event.composedPath());

Answer 5

我有同样的问题。我需要html元素的名称。在Chrome中，我得到带路径的名称。在firefox中，我尝试了compositionPath，但是它返回了一个不同的值。

为了解决我的问题，我使用了这个 e.target.nodeName 。使用 target 功能，您可以在Chrome，Firefox和Safari中检索HTML元素。

这是我在Vue中的功能：

selectFile(e) {
        this.nodeNameClicked = e.target.nodeName
        if (this.nodeNameClicked === 'FORM' || this.nodeNameClicked === 'INPUT' || this.nodeNameClicked === 'SPAN') {
          this.$refs.singlefile.click()
      }
    }

Answer 6

尝试一下：

让滚动= event.path ==未定义？ event.pageY：event.path [1] .scrollY;

在Chrome中，'event.path'可以正常工作，但在Firefox中则不能。在Firefox中，请使用“ event.pageY”代替

使用Firefox和Vue.js

6 个答案: