event.path undefined với Firefox và vue.js

Question

Đầu tiên tôi đang sử dụng lệnh vue-js. và NodeJs

Tôi có một vấn đề với firefox:

tôi sử dụng event.path [n] .id và với firefox Tôi đã nhận ra lỗi "event.path không xác định"

Nhưng nó hoạt động bị phạt ở khác trình duyệt.

Bạn có biết tại sao không?

Cảm ơn bạn!

Answer 1

Thuộc tính path của Event đối tượng không chuẩn. Tương đương chuẩn là composedPath, là một phương pháp. Nhưng nó mới.

Vì vậy, bạn có thể muốn thử té ngửa ra rằng, ví dụ:

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

Rõ ràng rằng sẽ không cung cấp cho bạn thông tin đường dẫn nếu trình duyệt không cung cấp nó, nhưng nó cho phép cả hai theo cách cũ và cách thức tiêu chuẩn mới, và như vậy sẽ làm trình duyệt chéo tốt nhất của nó.

Ví dụ:

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>

Trong các thử nghiệm của tôi, Firefox và IE11 không hỗ trợ hoặc path hoặc composedPath. Chrome hỗ trợ path (đó là ý tưởng ban đầu của Google) nhưng chưa (chưa) composedPath.

Vì vậy, tôi không nghĩ rằng bạn có thể lấy thông tin đường dẫn trên Firefox hoặc IE11. (Bạn đã không kiểm tra Edge.) Bạn có thể, rõ ràng, lấy đường dẫn qua e.target.parentNode và mỗi tiếp theo parentNode, đó là thường giống nhau, nhưng tất nhiên điểm path/composedPath là nó không luôn như nhau (nếu điều gì đó sửa đổi DOM sau khi sự kiện được kích hoạt nhưng trước khi trình xử lý của bạn được gọi).

Answer 2

Bạn có thể tạo chức năng composedPath riêng của bạn nếu nó không được thực hiện trong trình duyệt:

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; 
    } 
} 

Giá trị trả lại là tương đương với event.path của Google Chrome.

Ví dụ:

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

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

Answer 3

Chức năng này hoạt động như một polyfill cho Event.composedPath() hoặc 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); 
}