在 vuejs 中扩展事件监听器答案

【问题标题】：Extend event listeners within vuejs在 vuejs 中扩展事件监听器
【发布时间】：2018-11-21 22:00:00
【问题描述】：

我目前正在开发一个使用 VueJS 的项目。这个项目有很多 mixin 和组件，并且在 HTML 中@click 在很多地方都有定义。

是否可以获得附加了这些事件列表的 DOM 节点列表？或者扩展主事件监听器功能，以便我可以添加一些额外的逻辑？我已经搜索了几个小时的答案，但仍然找不到任何有用的东西。

谢谢！

【问题讨论】：

目前还不清楚（至少对我而言）你到底想做什么。是否要拦截v-on 指令分配的每个处理程序？
一种可能的方法是使用vue directive，然后循环 vnode 以检查是否存在任何侦听器。
@Bert 是的，这正是我想要做的。
@Sphinx 我用 vue 指令试过了，但我还是没让它工作。
很好，可能Vue Source Code可能有助于进一步理解。

标签： vue.js vuejs2

【解决方案1】：

我只是想让你知道，经过大量调试后，我找到了一种方法来确定哪些元素附加了 @click 事件。对于那些仍然想知道的人：

function loopThroughVueNodeChildren(children) {
    children.forEach(vnode => {
        // Is an @click attached to this element?
        if (vnode.data && typeof vnode.data.on !== 'undefined' && typeof vnode.data.on.click === 'function') {
            console.log('This element has an @click event! I can do whatever i need to do in here :)');
        }

        if (vnode.children) {
            this.addEventListenerOnVueNodes(vnode.children);
        }
    })
},


loopThroughVueNodeChildren(this._vnode.children);

【讨论】：