如何解决addEventListener重复绑定的问题

Question

我是用在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多次绑定，导致事件重复执行。请问如何解决？

Answer 1

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

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