将“ e”传递给新功能-javascript

Question

我有一个函数，它等待img上的click事件，然后启动imgclick（）;。

这一切都按预期工作，但是一旦进入函数内部，我就需要使用e.preventDefault（），因为“ e”不可用而失败。 我以为我可以通过输入文字e来解决这个问题，但这也不是一件好事。 我应该如何正确访问它？ 以下是我目前的JS ...

var img = document.getElementsByClassName("img"),
    i;

function imgclick(id, e) {
  e.preventDefault();
  e.stopPropagation();
}

for (i = 0; i < img.length; i++) {
  img[i].addEventListener("click", imgclick(this.id, e));
}

我仍然不依赖jQuery，但如果这是一个明显的错误，请对不起。

Answer 1

首先：添加eventListener ，您需要引用 callback function ，而不是调用它 。
第二： event ，或e 参数应该是第一个参数 callback function ，那里你可以得到id与this.id ，或者用e.target.id ：

var img = document.getElementsByClassName("img"),
    i;

function imgclick(e) {
  e.preventDefault();
  e.stopPropagation();
  var id=this.id;  //e.target.id     
 }

for (i = 0; i < img.length; i++) {
  img[i].addEventListener("click", imgclick);
 }

Answer 2

正如其他人已经说过的那样， imgclick(this.id, e)实际上会调用您的处理程序函数，而不是等到用户单击img为止。 例如，您可以使用附件并为每个元素创建一个新的处理程序。 这是一个基于您的代码的jsfiddle： https ://jsfiddle.net/crr5age4/

Answer 3

您需要为addEventListener提供一个带有单个参数的函数（事件： e ），然后将该event传递给imgclick函数。

如果您只能定位支持ES2015箭头功能的浏览器，则可以使用：

img[i].addEventListener("click", e => imgclick(this.id, e));

或对于任何ES5 +环境：

img[i].addEventListener("click", function(e) { imgclick(this.id, e) }.bind(this));

或对于任何JavaScript环境：

var _this = this;
img[i].addEventListener("click", function(e) { imgclick(_this.id, e) });

如果您不需要访问this ，则只需

function(e) { imgclick(somethingElse.id, e) }

作为第二个参数。