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;   } };
 

相关