在項(xiàng)目開(kāi)發(fā)中遇到需要獲取觸發(fā)事件元素冒泡過(guò)程的所有元素原杂，找到一個(gè) api event.path
上代碼
target.addEventListener('click', (event) => {
const ev = window.event || event
const path = ev.path
})
path.png
從截圖可以看到點(diǎn)擊事件關(guān)于 dom 元素的完整冒泡過(guò)程晦闰。
BUT
該屬性在Chrome和Opera瀏覽器下沒(méi)問(wèn)題朝蜘，但是在Firefox和Safari中發(fā)現(xiàn)event并沒(méi)有path屬性蚂四。
進(jìn)過(guò)查找資料發(fā)現(xiàn)歼疮，在瀏覽器新的標(biāo)準(zhǔn)里定義了composedPath可以獲取
target.addEventListener('click', (event) => {
const ev = window.event || event
const path = event.path || (event.composedPath && event.composedPath())
})
想了想署咽，如果 composedPath 也不兼容呢近顷，就換了種兼容性更好的寫(xiě)法
// 獲取觸發(fā)元素 event事件冒泡過(guò)程所有元素
export const eventPath = (e) => {
let path = (e.composedPath && e.composedPath()) || e.path,
target = e.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 || []
let parentNode = node.parentNode
if (!parentNode) {
return memo
} else {
return getParents(parentNode, memo.concat(parentNode))
}
}
return [target].concat(getParents(target), window)
}
