大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~
如果在做某个平台的时候,我们需要统计用户点击的次数,点击的区域,点击元素,等等,那我们应该怎么去做比较合适呢?
举个例子,我想在用户点击页面上的每一个元素时,我都能把这个元素的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}</${tagName}>`;
}
写完这几个函数之后,我们只需要在每一个点击事件中去插入这个函数即可
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,
);
其实上面就是埋点库中,全局点击上报的一种解决方案,看似小问题,但是其实面试了这么多人,感觉只有很少一部分人能回答的比较好~
我是林三心