提供页面点击事件监听
pnpm install @tracing/core @tracing/browser-click
import { TracingCore } from "@tracing/core";
import { BrowserClickPlugin } from "@tracing/browser-click";
const collect = new TracingCore({
plugins: [BrowserClickPlugin()] // 页面点击事件已应用
});
collect.init();
interface BrowserClickPluginConfig {
document: HTMLElement;
watchElement: Array<keyof HTMLElementTagNameMap>;
watchAttrs: string[];
watchLevel: number;
genRecord: (target: HTMLElement) => Record<string, any>;
}
- Type:
HTMLElement
选填 - Default:
document.body
监听事件挂载元素
由于监听是基于事件冒泡的,所以注意是否阻止了冒泡,导致没有监听到点击事件
可以通过手动触发来解决
import { TracingCore } from "@tracing/core";
import { BrowserClickPlugin, BrowserClickEvent, defaultGenRecord } from "@tracing/browser-click";
const collect = new TracingCore({
plugins: [BrowserClickPlugin()]
});
collect.init();
const element = document.createElement("div");
const record = defaultGenRecord(element);
collect.report(BrowserClickEvent, record); // 自定义发送一个 browser-click report
- Type:
Array<keyof HTMLElementTagNameMap>
选填 - Default:
["button", "a", "input", "textarea"]
需要监听哪些元素
- Type:
string[]
选填 - Default:
["auto-watch-browser-click"]
当元素上有这个属性时也会进行收集
- Type:
number
选填 - Default:
1
监听等级
有时候你想监听的元素并不直接作用在当前点击触发元素上,所以这个字段允许查找 parentElement 几次,比较典型的 ant-design Button 内部有一个 span 标签,而且大多数会点击到 span 上
- Type:
(target: HTMLElement) => Record<string, any>
选填 - Default:
ReturnType<defaultGenRecord>
你自定决定自动收集那些数据