Safari 点击事件 event.path 为 undefined不存在

太过爱你忘了你带给我的痛 2022-09-09 06:56 9阅读 0赞

### 场景： ###

业务场景中需要获取到触发事件元素冒泡过程的所有元素，因此使用event.path属性。  
然而测试中发现在 Safari 的点击事件中，event.path 属性不存在。

### 资料： ###

> 在一些社区表示，IE11 和 Legacy Edge（v44 或更早版本，在从 v79 开始的 Chromium  
> 更新之前）都不支持path或composedPath。火狐支持composedPath。Chrome 支持path（这是 Google  
> 的最初想法）和composedPath。根据 MDN的composedPath描述，截至 2021 年 8 月，除 IE11  
> 外，所有主要浏览器的最新版本都支持该属性。

**此处查看：**[MDN的composedPath介绍][MDN_composedPath]

### 解决方案： ###

##### 方案1 #####

网上很多资料显示e.composedPath()方法能支持safari，类似如下：

function returnEventPath(e) { 
    	return e.path || (e.composedPath && e.composedPath()) || ''
    }

然而实践发现获取到的路径为\[\]，即空数组。  
（这里试了原生js通过getElementById获取元素是可行的，但是react中的点击事件不行）

##### 方案2 #####

重写全局的event对象中的composedPath方法：

// Event.composedPath
    (function(e, d, w) { 
      if(!e.composedPath) { 
        e.composedPath = function() { 
          if (this.path) { 
            return this.path;
          } 
        var target = this.target;
    
        this.path = [];
        while (target.parentNode !== null) { 
          this.path.push(target);
          target = target.parentNode;
        }
        this.path.push(d, w);
        return this.path;
        }
      }
    })(Event.prototype, document, window);

##### 方案3 #####

函数实现composedPath方法：

这里因为是react的某个组件单独使用，因此我采用方案三实现解决。

[MDN_composedPath]: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath