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

Question

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

$(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

Answer 1

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

$(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

Answer 2

首先，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

Answer 3

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

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

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

Unable to get the event target property of a named function

javascript

jquery

events

targeting

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

Unable to get the event target property of a named function

javascript

jquery

events

targeting

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