目前在开发一款chrome extension,因为功能比较多,有些需要登录账号才能使用,类似VIP验证,早期是在每个相应的函数里通过if判断return,但是手动一个个添加太繁琐!
思路是添加click事件拦截,获取到每个click事件父元素或者本身,未通过验证时,添加捕获事件,通过后,移除对应捕获事件,无需刷新重载页面,也不影响原有的绑定事件!
捕获事件需要原生dom才能添加,但节点原生方法无法批量获取或者获取不到,故而需借助jquery,目前唯一缺点是需要逐个遍历添加,后期尝试改进!
实测添加到click事件本身的元素也可以优先触发,做到拦截效果,关键再addEventListener('click',targetEvent,'capture')第三个参数,
而removeEventListener('click', targetEvent, 'useCapture')第三个参数代表只移除带捕获属性的click事件,也就是我们自己添加的拦截事件!
//监听添加移除的公共事件
const targetEvent= (e) => {
//三种方式兼容不同浏览器,移除内部事件冒泡
e.stopImmediatePropagation()
e.cancelBubble = true //IE
e.stopPropagation()
//后面添加需要执行的动作,校验vip或者弹出登录框等提示
}
//未登录时的添加拦截事件
const addEvent = async () => {
let item = $('.el-dropdown')
let item2 = $('.el-dropdown-menu')
for(let i=0; i<item.length; i++){
item[i].addEventListener('click',targetEvent,'capture')
}
for(let i=0; i<item2.length; i++){
item2[i].addEventListener('click',targetEvent,'capture')
}
}
//登录后的移除拦截事件
const removeEvent = () => {
let item = $('.el-dropdown')
let item2 = $('.el-dropdown-menu')
for(let i=0; i<item.length; i++){
item[i].removeEventListener('click', targetEvent, 'useCapture')
}
for(let i=0; i<item2.length; i++){
item2[i].removeEventListener('click', targetEvent, 'useCapture')
}
}
//全局判断---------------
if(true) {
addEvent()
return }else{
removeEvent()
}
