vue3 自定义指令监听点击事件,多次触发
vue3 自定义指令,监听元素的点击事件踩坑:点击一次,执行多次代码。
·
在做埋点的时候,我是通过自定义指令,监听点击事件来实现的,代码如下:
// main.ts
app.directive('track', (el, binding) => {
el.addEventListener('click', (e: any) => {
e.stopPropagation();
console.log(e)
console.log(binding.value)
console.log(el)
}, false)
})
// 组件使用
<el-button type="primary" plain @click="getList" v-track="'user:search'">查询</el-button>
控制台打印了两次
怎么改都是两次,有的甚至三次,后来看官方文档,有这样一段:
于是乎,改成只在mounted中挂载:
// main.ts app.directive('track', { mounted(el, binding, vnode, preVnode) { el.addEventListener('click', () => { console.log(el) console.log(binding.value) console.log(vnode) console.log(preVnode) }) } })
看控制台:
成功了,只执行了一次。
更多推荐
已为社区贡献5条内容
所有评论(0)