FireFox和Safari兼容event.path

问题的出现： 由于在添加埋点的时候，给document绑定一个事件，然后循环e.path找出元素下的attribute的ilog，然后发送埋点。

在项目开发中遇到需要获取触发事件元素冒泡过程的所有元素，在Chrome中可以通过event.path获取。

element.onClick(event) {
  const ev = window.event || event;
  const path = ev.path;
}

该属性在Chrome和Opera浏览器下没问题，但是在Firefox和Safari中发现event并没有path属性。
进过查找资料发现，在浏览器新的标准里定义了composedPath可以获取

element.onClick(event) {
  const ev = window.event || event;
  const path = event.path || (event.composedPath && event.composedPath());
  console.log(path)  //[button#btn, div, body, html, document, Window]
}


但是以上ios只支持10以上版本，为了兼容ios9.X请看下面完整例子
* 获取事件冒泡路径，兼容ie11,edge,chrome,firefox,safari * @param evt * @returns {*} */

最总完整事件：

var ATTR_NAME = 'data-ilog';

var ATTR_BINDED = 'ilogbinded';

var location = window.location;

var getInnerText = function getInnerText(element) {

　　return typeof element.textContent === 'string' ? element.textContent : element.innerText;

};

 

var eventPath = 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);
}

 

var bind = function bind(e) {

　　var target;

　　var path = eventPath(e);

　　if(path && path.length>0){

　　for (var i = 0; i < path.length; i++) {

　　　　if (path[i].dataset && path[i].dataset.ilog) {

　　　　　　target = path[i];

　　　　}

　　}

}

 

if (target) {

　　var asm = target.getAttribute(ATTR_NAME);

　　var isBinded = target.getAttribute(ATTR_BINDED);

　　if (asm && isBinded === null) {

　　　　var href = encodeURIComponent(location.href);

　　　　var txt = getInnerText(target) + '';

　　　　txt = txt.trim();

　　　　// 发送埋点（{ href: href, txt: txt, asm: asm }）

　　}

　　return false;

　　}

};