vue项目中捕捉用户点击广告行为的方案
一、需求描述
在一些接入第三方广告的vue项目中，我们可能需要实现捕捉用户行为，判断用户是否点击广告的功能。这样的需求我们马上会想到给广告元素添加一个点击事件，这样就能完美实现需要。但是，这里有两个问题，第一个就是项目中可能有许多广告元素，如何实现统一添加事件？你可能会说可以注册一个自定义事件。是的，这样确实可以，但是你又会发现第二个问题，因为广告是第三方组件引入，所以无法捕捉到元素，也无法注册事件。
那么怎么解决呢？我想到的就是利用"window.addEventListener("blur", event);"方法，在浏览器窗口注册失焦事件实现。因为是地方组件引入的广告，所以当广告弹出时和当前浏览器并不是一个窗口，点击广告会使当前窗口失去焦点，具体代码如下：
//App.vue
//在mounted钩子中使用window.addEventListener("blur", event)，监听页面是否失去焦点
mounted（）{
this.$nextTick(() => {
window.addEventListener("blur", this.onWindowBlur);
});
}；
//在methods对象中注册onWindowBlur事件
methods: {
onWindowBlur(){
if (!document.activeElement) return;//判断当前是否有获取到焦点的元素，即在窗口失去焦点后是否捕捉到广告元素
var eid = document.activeElement.id;//将广告id保存起来。
if(eid) {
//如果广告id存在时，在这里完成用户行为捕捉，因为当我们获取到广告id时说明用户已经点击了相应的广告
}else {
//这里是特殊情况，即用户点击了广告但没有获取到广告id。
let iframes = document.activeElement.parentElement.getElementsByTagName(
"iframe"
);//因为广告是第三方引入，那必定会页面必定会使用<iframe>嵌入，所以我们在获取广告id失败时将页面所有的广告元素保存起来。
let iframesList = Array.from(iframes); //并将它们转换为一个数组。这时，我们已经在用户点击广告时获取到了页面所有广告，所有也可以完成用户的行为捕捉。
}
}；
}；
