无法获取命名函数的事件目标属性答案

【问题标题】：Unable to get the event target property of a named function无法获取命名函数的事件目标属性
【发布时间】：2015-04-01 15:05:47
【问题描述】：

在下面链接的小提琴中，有一些我需要排除故障的示例代码。为了在小提琴中进行演示，我已经从原始代码（未编写）中对其进行了一些简化。

$(document).ready(function(){
    $("ul").children().each(function(i){
        $(this).click(function(){
            var indexItem = i; 

            if(indexItem == 0){
                 displayId();                                  
            }
            if(indexItem == 1){
                displayNode();
            }
            if(indexItem == 2){
                displayNodevalue();
            }
       });
    });
})
function displayId(event){
   // below returns undefined not what I want
   // var $listID = jQuery(this).attr("id"); 
   var $listID = event.target.id;
    alert($listID);
}

function displayNode(event){
    var listNodename = event.target.nodeName;
    alert(listNodename);
}

function displayNodevalue(event){
    var listValue = event.target.nodeValue;
    alert(listValue);
}

如何获取这些项目的 event.target 属性？控制台显示：

Uncaught TypeError: Cannot read property 'target' of undefined

我在下面搜索了各种可能的解决方案。他们很好，但我没有找到答案。

How to pass the event object to a named function

Getting the ID of the element that fired an event

https://api.jquery.com/event.target/

如果我错过了这些线程中的答案，请告诉我。似乎这个问题应该在某个地方得到回答，但我很难找到它。如果没有，我会很感激一些帮助，告诉我这段代码有什么问题以及如何获取事件目标。谢谢。

FIDDLE LINK

【问题讨论】：

请不要绕过警告信息。 jsfiddle.net 的链接必须附有代码。
@Satpal，我没有注意到警告。我发布代码没有问题，过去我在发布时被建议使用 fiddles 或 codepen 等来显示代码，因为它更容易调试。这就是为什么我把小提琴放在第一位的原因。

标签： javascript jquery events targeting

【解决方案1】：

首先，each() 是冗余代码，因为您可以使用$(this).index() 访问被点击元素的index。然后您只需要捕获在单击处理程序中引发的事件并将其传递给您的其他函数。试试这个：

$(document).ready(function () {
    $("ul").children().click(function (e) {
        var indexItem = $(this).index();

        if (indexItem == 0) {
            displayId(e);
        }
        if (indexItem == 1) {
            displayNode(e);
        }
        if (indexItem == 2) {
            displayNodevalue(e);
        }
    });
})

function displayId(e) {
    var $listID = e.target.id;
    alert($listID);
}

function displayNode(e) {
    var listNodename = e.target.nodeName;
    alert(listNodename);
}

function displayNodevalue(e) {
    var listValue = e.target.nodeValue;
    alert(listValue);
}

Updated fiddle

【讨论】：

使用$("ul li")而不是$("ul").children()不是更好吗，因为只有li可以是ul的直接子级
可能是，我只是使用了 OP 的选择器，假设他的选择背后有一些其他逻辑。
@RoryMcCrossan 谢谢。 +1 是的，原始代码使用的是子选择器，所以我只是复制/粘贴了。

【解决方案2】：

需要将事件对象作为参数传递

$(document).ready(function () {
    $("ul").children().each(function (i) {
        $(this).click(function (e) {
            var indexItem = i;

            if (indexItem == 0) {
                displayId(e);
            }
            if (indexItem == 1) {
                displayNode(e);
            }
            if (indexItem == 2) {
                displayNodevalue();
            }
        });
    });
})

演示：Fiddle

也试试

$(document).ready(function () {
    var fns = [displayId, displayNode, displayNodevalue]
    $("ul").children().click(function (e) {
        var indexItem = $(this).index();
        fns[indexItem] ? fns[indexItem](e) : '';
    });
})

演示：Fiddle

【讨论】：

谢谢阿伦。我以为我试过了，但我没有将事件 obj 传递给 click 函数！看来我必须等待才能标记答案

【解决方案3】：

将点击函数中的事件参数传递给您的函数，如下所示：

$(this).click(function (event) {
   var indexItem = i;
   if (indexItem == 0) {
     displayId(event);
   }
   if (indexItem == 1) {
     displayNode(event);
   }
   if (indexItem == 2) {
     displayNodevalue();
   }
});

【讨论】：