5

我有一个 vue.js 脚本，它在方法中生成一个元素“镜头”。现在，我想添加一个 EventListener，它在单击镜头元素时调用另一个方法。

问题：
我尝试了两种不同的方法来添加监听器。

1：lens.addEventListener("click", this.openLightbox(src));
有效，但在页面加载时执行，而不是在点击时执行

2：lens.addEventListener("click", function() { this.openLightbox(src) }, false);
在点击而不是在有效负载上执行，但抛出错误：Uncaught TypeError: this.openLightbox is not a function

问题：
如何在缩放方法中调用灯箱方法？如果我将代码从灯箱方法复制到缩放方法本身作为函数，我确实可以工作，但是由于灯箱方法也被其他元素调用，这会导致重复代码。

这是完整的代码：

initVue(target: string) : void {
    this.vue = new Vue({
        el: "#" + target,
        store,
        delimiters: vueDelimiters,     
        data: {

        },
        methods: {
            
            openLightbox(src) {
                console.log(src);
            },
            
            imageZoom(src) {
            
                lens = document.createElement("DIV");
                
                // works but is executed on pageload, not on click
                lens.addEventListener("click", this.openLightbox(src));
                
                // Is executed on click and not on payload, but throws error: Uncaught TypeError: this.openLightbox is not a function
                lens.addEventListener("click", function() { this.openLightbox(src) }, false);

                
            }
        }
    });
}

4

1 回答 1

10

您必须像这样附加this到匿名函数：

lens.addEventListener("click", function() { this.openLightbox(src) }.bind(this), false);

或者在语句之前定义一个别名，如下所示：

var self = this;
lens.addEventListener("click", function() { self.openLightbox(src) }, false);

否则，this将不会引用您需要的父上下文。

于 2018-06-12T13:14:52.833 回答