event.pathはFirefoxとvue.jsで定義されていません

Question

最初に私はvue-jsを使用しています。私はevent.path [N] .IDとFirefoxで私は "event.path未定義"

しかし、それは他に罰金作業エラーを得た使用

：とNodeJs

は、私は、Firefoxに問題がありますブラウザ。

理由はありますか？

ありがとうございました！

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 
} 

明らかにブラウザがそれを供給しない場合には、あなたのパス情報を与えることはありませんが、それは古い方法の両方を行うことができます新しい、標準的な方法、そしてそのように最高のクロスブラウザを行います。

例：私のテストでは

document.getElementById("target").addEventListener("click", function(e) { 
 
    // Just for demonstration purposes 
 
    if (e.path) { 
 
    console.log("Supports `path`"); 
 
    } else if (e.composedPath) { 
 
    console.log("Supports `composedPath`"); 
 
    } 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);

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

、FirefoxとIE11はpathまたはcomposedPathのいずれかをサポートしていません。 Chromeはpathをサポートしていますが（Googleの元のアイデアでしたが）（まだ）composedPathはありません。

FirefoxやIE11でパス情報を取得できないと思います。 （エッジをテストしていませんでした。）あなたは、明らかに、e.target.parentNode及びその後の各parentNode経由のパスを取得することができ、通常は同じであるが、もちろんpath/composedPathのポイントは、（それは常にないということと同じですイベントがトリガーされた後、ハンドラーが呼び出される前に何かがDOMを変更した場合）。

Answer 2

それがブラウザに実装されていない場合は、独自のcomposedPath関数を作成することができます

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

この関数は、ちょっとこの質問は、任意のコメントなしでダウン票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); 
}