vue.js - 如何解决addEventListener重复绑定的问题

问题描述

问 题

我是用在vue的指令：

directives:{

        link:{
            componentUpdated:function (el) {
                let url = el.href;
                let shell = core.load_electron().load_shell();
                if (url.indexOf('http') === 0 || url.indexOf('https') === 0) {
                    var handler = function (e) {
                        e.preventDefault();
                        shell.openExternal(url)
                    };
                    el.removeEventListener('click', handler, false);
                    el.addEventListener('click', handler, false);
                }
            }
        }

    },

这段代码改变了a标签原来的click事件。现在造成的问题是，addEventListener多次绑定，导致事件重复执行。请问如何解决？

解决方案

el.removeEventListener('click', handler, false);

这里并不能移除上一次绑定的函数，原因是componentUpdated每次运行后本次handler函数与上一次handler函数并不是同一函数

这篇关于vue.js - 如何解决addEventListener重复绑定的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！