大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

如果在做某个平台的时候，我们需要统计用户点击的次数，点击的区域，点击元素，等等，那我们应该怎么去做比较合适呢？

(资料图片)

举个例子，我想在用户点击页面上的每一个元素时，我都能把这个元素的DOM节点信息记录下来，并且上报到服务器，便于后面产品那边的统计用户喜好~

那我们要怎么去做呢？写一个公共函数吗？然后去统一做上报吗？

我首先写一个函数，这是一个获取点击元素信息的函数，我们可以在点击的 event 参数中拿到目标元素 target

图片

const reportDOM = (e: PointerEvent) => {  // 获取到点击的目标元素  const el = e.target  // 把目标元素解析成字符串  const detail = htmlElementAsString(el)  // 进行上报  report(detail)}// 上报函数export const report = (detail) => {  request(url, detail)}// 解析函数export function htmlElementAsString(target: HTMLElement): string {  const tagName = target.tagName.toLowerCase();  if (tagName === "body") {    return "";  }  let classNames = target.classList.value;  classNames = classNames !== "" ? ` class="${classNames}"` : "";  const id = target.id ? ` id="${target.id}"` : "";  const innerText = target.innerText;  return `<${tagName}${id}${classNames !== "" ? classNames : ""}>${innerText}`;}

写完这几个函数之后，我们只需要在每一个点击事件中去插入这个函数即可

const click1 = (e: PointerEvent) => {  reportDOM(e)    // coding....}const click2 = (e: PointerEvent) => {  reportDOM(e)    // coding....}const click3 = (e: PointerEvent) => {  reportDOM(e)    // coding....}

但是一个页面中，点击事件非常多啊，不可能每一个事件中去插入这个函数，非常麻烦

最好的办法就是把 click 事件挂载在 window 身上，然后根据 elementFromPoint 去计算坐标匹配的元素，进行解析上报

window.addEventListener(  "click",  (e: PointerEvent) => {    // 通过坐标计算出目标元素    const el = getTargetDomByPointerEvent(e);    if (!el) return;    // 把目标元素解析成字符串    const detail = htmlElementAsString(el);    // 进行上报    report(detail);  },  true,);// 通过坐标计算目标元素export const getTargetDomByPointerEvent = (e: PointerEvent) => {  const el = document.elementFromPoint(e.pageX, e.pageY);  if (el) {    return el as HTMLElement;  }  return null;};

我们可以通过配置一个数组 globalClickListeners ，只对我们所需要的 DOM 节点进行监听上报，

const globalClickListeners = [  {    selector: ".cla", // 选择器  },  {    elementText: "report2", // 元素文本  },  {    selector: ".r", // 选择器 + 元素文本    elementText: "report3",  },];

那么我们需要对 window 的点击监听进行改造

window.addEventListener(  "click",  (e: PointerEvent) => {    const el = getTargetDomByPointerEvent(e);    if (!el) return;    if (globalClickListeners.length) {      globalClickListeners.forEach(({ selector, elementText, data = "" }) => {        if (selector) {          // 选择器的情况          const els = document.querySelectorAll(selector);          // 点击元素是否包含所属选择器范围          const isIncludes = [...(els as unknown as any[])].includes(el);          // 包含则上报          if (isIncludes) {            const detail = htmlElementAsString(el);            // 进行上报            report(detail);          }        } else if (el.textContent === elementText) {          // 文本相同情况          const detail = htmlElementAsString(el);          // 进行上报          report(detail);        }      });    }  },  true,);

其实上面就是埋点库中，全局点击上报的一种解决方案，看似小问题，但是其实面试了这么多人，感觉只有很少一部分人能回答的比较好~

我是林三心