Question

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

这一切都按预期工作，但一旦在函数内部，我需要使用e.preventDefault（）失败，因为“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 参数应该是{{1>的{em>第一个参数在那里，您可以使用callback function获取id，或者使用this.id获取：{/ p>

e.target.id

Answer 2

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

Answer 3

您需要为OrderedDict([ ("masterlistings_set", [ "0a06e3d7-87b7-4526-a877-c10f54fa5bc9", "343643ac-681f-4597-b8f5-ff7e5be65eef", "449a3ad2-c76c-4cb8-bb86-1be72fafcf64", ]) ])提供一个函数，该函数只接受一个参数（事件：addEventListener），然后将e传递给您的event函数。< / p>

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

imgclick

或者对于任何ES5 +环境：

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

或者对于任何JavaScript环境：

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

如果您不需要访问var _this = this; img[i].addEventListener("click", function(e) { imgclick(_this.id, e) });，则只需

即可

this

作为第二个参数。

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

3 个答案: