javascript - 在类项目上注册事件并在单击时获取其属性

Question

我正在尝试通过右键单击任何类项目来打开菜单。

var menu = document.getElementById("menu")
function contextMenu(e, atr) {
    //some code
}
var document_item = document.getElementsByClassName("item");
for (var i = 0; i < document_item.length; i++) {
     var atr = document_item[i].getAttribute("inspect")
     document_item[i].addEventListener('contextmenu', function (e) {contextMenu(e, atr) })
}

每个事件都使用相同的 atr 值(最后加载的)调用

所以atr应该是clicked div with class item的属性

Answer 1

如果你这样做，附加到事件监听器的函数将始终具有 var 的当前值，因为当事件触发时循环已经结束，它将是最后一个值。您可以使用带参数的 IIFE(立即调用函数执行)“保存”该值:

var menu = document.getElementById("menu")
function contextMenu(e, atr) {
    //some code
}
var document_item = document.getElementsByClassName("item");
for (var i = 0; i < document_item.length; i++) {
     var atr = document_item[i].getAttribute("inspect")
     document_item[i].addEventListener('contextmenu', (function(_atr){ return function (e) {contextMenu(e, _atr) }; })(atr) )
}

正如 Pete 评论的那样，您还可以使用 e.currentTarget 在函数中获取属性的值