前端监控二全局click事件的劫持（与框架解耦）

神奇小白

已于 2023-07-22 01:23:43 修改

阅读量498

点赞数

分类专栏：前端文章标签：前端

于 2023-07-22 01:21:34 首次发布

本文链接：https://blog.csdn.net/uotail/article/details/131861731

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

click事件劫持

最近在做一个日志监控插件，一些验证，顺便验证了margin塌陷的知识点
这里主要讲点击事件的劫持

vue指令实现埋点

. 我们组内项目使用vue居多，本来想用vue的指令来实现点击按钮日志上传。但这种对业务代码侵入过多，而且不具备普适性

addEventListener原型方法重写

HTMLElement.prototype.addEventListener
EventTarget.prototype.addEventListener

可以劫持addEventListener 添加的事件,但不能直接处理onclick上的点击事件

// 1. HTMLElement.prototype.addEventListener 
var oldAddEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function(event, handler, bubbling) {
    /* do whatever you want with event parameters */

    oldAddEventListener.call(this, event, handler, bubbling);
}
// 2. EventTarget.prototype.addEventListener
const nativeEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(...args) {
  if (this.matches('div') && args[0] === 'click') {
    console.log('listener is being added to a div');
    debugger;
  }
  nativeEventListener.apply(this, args);
}
// then, when an event listener is added, you'll be able to intercept the call and debug it:
document.querySelector('div').addEventListener('click', () => {
  console.log('clicked');
});

https://stackoverflow.com/questions/1436823/can-i-programmatically-examine-and-modify-javascript-event-handlers-on-html-elem

https://stackoverflow.com/questions/52417142/how-can-i-watch-event-handlers-being-added-to-an-element/52417182

document.body.addEventListener(‘click’）

先说结论推荐使用这种方法，有人担心如果事件被阻止冒泡后，body上的点击事件还会触发吗？

可以先看下事件的传播路径

事件的传播路径

事件阶段分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段：事件对象通过目标的祖先从窗口传播到目标的父级。此阶段也称为捕获阶段。
目标阶段：事件对象到达事件对象的事件目标。此阶段也称为目标阶段。如果事件类型指示事件不会冒泡，则事件对象将在该阶段完成后停止。
冒泡阶段：事件对象以相反的顺序通过目标的祖先传播，从目标的父级开始并以 Window结束。此阶段也称为冒泡阶段。

注意：

如果bubbles属性设置为 false，则将跳过冒泡阶段，
如果stopPropagation()在调度之前已调用，则将跳过所有阶段。(stopPropagation不仅仅是阻止冒泡也会阻止捕获)

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget
https://www.w3.org/TR/DOM-Level-3-Events

addEventListener

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

主要说第三个useCapture参数
useCapture: 默认是false,表示监听冒泡阶段触发的事件,
如果设置为true，则是捕获阶段的事件

如果绑定事件的时候给addEventListener传递了第三个参数为true,
那么解除绑定的时候也需要给removeEventListener传递第三个参数为true,否则解绑会失败

如果子元素中的点击事件调用了stopPropagation，阻止了事件的传播，但根据事件的传播路径，顶级元素一定会在捕获阶段触发点击事件。

所以要监听所有的点击事件使用如下方法

 document.body.addEventListener('click',(e)=>{
        console.log('body click', e)
        // 在这里可以上传埋点数据
    },true)

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    .father{
        height: 200px;
        width: 200px;
        background-color: skyblue;
    }
    .son{
        height: 100px;
        width: 100px;
        background-color: orange;
        margin-top: 20px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</body>
<script>
    document.getElementsByClassName('son')[0].addEventListener('click',(e)=>{
        e.stopPropagation()
        console.log('son',e)
    })
    document.body.addEventListener('click',(e)=>{
        // e.stopPropagation()
        console.log('fan',e)
    },true)
</script>
</html>

神奇小白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端监控二全局click事件的劫持（与框架解耦）

最近在做一个日志监控插件，一些验证，顺便验证了margin塌陷的知识点这里主要讲点击事件的日志上传. 我们组内项目使用vue居多，本来想用vue的指令来实现点击按钮日志上传。但这种对业务代码侵入过多，而且不具备普适性。
复制链接

扫一扫