将 "e" 传递给新函数 - javascript

Question

我有一个等待 img 上的点击事件然后启动的函数 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 的 第一个参数 ，在那里你可以用 this.id 得到 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

您需要为 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) }

作为第二个参数。

Answer 3

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

将 "e" 传递给新函数 - javascript

Pass "e" to a new function - javascript

javascript

dom-events