Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

做一个懂UI的前端工程师
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 也许是后端

    • node
  • 学习笔记

    • 暂时为空
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 面试
关于
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 获取事件的冒泡路径
  • DOM操作常用方法
  • DOM
Ame
2020-06-10

获取事件的冒泡路径

  /*
 * 获取事件冒泡路径,兼容ie11,edge,chrome,firefox,safari
 * @param evt
 * @returns {*} 由dom元素组成的数组[span,div,...,Window]
 */
  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];
      }

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

  /*
 * 获取父节点
 * @param node,memo
 * @returns {*}
 */
    function getParents(node, memo) {
        memo = memo || [];
        const parentNode = node.parentNode;

        if (!parentNode) {
            return memo;
        } else {
            return getParents(parentNode, memo.concat(parentNode));
        }
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
编辑 (opens new window)
上次更新: 2021/03/31, 14:03:00
DOM操作常用方法

DOM操作常用方法→

最近更新
01
TypeScript类型定义
03-20
02
Typescript
03-19
03
常用兼容IE或增强浏览器的库
03-09
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式