JS获取事件冒泡路径(composedPath )的兼容性写法

原创于 2019-04-17 10:43:09 发布

· 3k 阅读

2 ·

版权

文章标签：

#composedPath #path #event #事件冒泡路径 #事件冒泡

Javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种兼容IE11、Edge、Chrome、Firefox和Safari等浏览器的事件冒泡路径获取方法，通过自定义函数eventPath(evt)实现，确保在不同环境下都能准确捕捉到事件传播的元素路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用方式：

function clickDom(event)
	const path=eventPath(event);
	console.log(path);
}

代码：

/*
 * 获取事件冒泡路径，兼容ie11,edge,chrome,firefox,safari
 * @param evt
 * @returns {*}
 */
  function eventPath(evt) {
        const  path = (evt.composedPath && evt.composedPath()) || evt.path,
            target = evt.target;

        if (path != null) {
            return (path.indexOf(window) < 0) ? path.concat(window) : path;
        }

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

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

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

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