Question

这是我的代码的一部分（事件监听器被添加到我的图像中）。

var overlay = this.overlay;
    var icon_holder = this.icon_hld;
    var docfrag = document.createDocumentFragment();
    var images = holder.querySelectorAll('img');
    var that = this;
    function video_play() {
        console.log(this);
        this.style.display = 'none';
        this.parentNode.querySelector('.JGalleryMedia').style.display = '';
        this.parentNode.querySelector('.JGalleryMedia').play();
        this.parentNode.querySelector('.JGalleryMedia').autoplay = true;
    }
    [].forEach.call(images, function (img) {
        img.addEventListener('click', JGallery.prototype.showMe.bind(that), false);
    }
}

这在opera和chrome中很有效，但在IE和FF中不起作用。我见过caniuse.com，但我没有找到任何我不应该在我的代码中使用的东西。如果你想看到工作演示用chrome或opera打开zaervax.ir并转到图库并点击图像缩略图。

Answer 1

我不确定，但我认为你不能在eventListener中传递这样的参数。

您可以尝试这样的匿名函数：

img.addEventListener('click', function(){
    JGallery.prototype.showMe.bind(that)
}, false);

此外，如果你想传递这个作为参数，你可以使用ES6 Arrow功能，这样你就可以在showMe（）函数中访问 this 。就这样做了：

img.addEventListener('click', event => this.JGallery.prototype.showMe(event), false);

More infos about arrow functions

如果这不起作用，您是否可以尝试打开控制台并告诉我们是否有任何错误消息？

Answer 2

确定IE问题是关于forEach（没有.call）（我在上面提到的行之上有几行）。和FF（v47）似乎与forEach有问题。我更新了我的FF（到v50）（问题在没有代码更改的情况下解决了）。而且我决定不再使用forEach，而是使用了while。像这样...

 var i = 0;
 while(i < images.length){
    var img = images.item(i);
    img.addEventListener('click', JGallery.prototype.showMe.bind(that), false);
}

现在它工作得很好，你可以在zaervax.ir

中查看

事件侦听器不能在IE和FF中工作

2 个答案: