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>