@tracing/browser-click

提供页面点击事件监听

使用

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

document

• 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

watchElement

• Type: Array<keyof HTMLElementTagNameMap> 选填
• Default: ["button", "a", "input", "textarea"]

需要监听哪些元素

watchAttrs

• Type: string[] 选填
• Default: ["auto-watch-browser-click"]

当元素上有这个属性时也会进行收集

watchLevel

• Type: number 选填
• Default: 1

监听等级

有时候你想监听的元素并不直接作用在当前点击触发元素上，所以这个字段允许查找 parentElement 几次，比较典型的 ant-design Button 内部有一个 span 标签，而且大多数会点击到 span 上

genRecord

• Type: (target: HTMLElement) => Record<string, any> 选填
• Default: ReturnType<defaultGenRecord>

你自定决定自动收集那些数据