如何创建一个处理程序，它将返回列表元素'LI'的'ID'点击

Question

我正在尝试创建一个处理程序，它将返回列表元素Clicked的'ID'。我尝试了很多变化（有和没有For循环），但我似乎无法使它工作。感谢您的帮助。

脚本

function getItems () {
    var cList = document.getElementById("cMenu");
    var cItems = cList.getElementsByTagName("LI");

    for (var i = 0; i < cItems.length; i++) {

        cItems[i].onclick = function(){
            var theId = this.id;
        };
    }
    console.log(theId);
}

HTML源

<ul id="cMenu">
  <li>
    Parent item 1
    <ul>
      <li id="item1">Child item 1</li>
      <li id="item2">Child item 2</li>
    </ul>
  </li>
  <li>
    Parent item 2
    <ul>
      <li id="item3">Child item 3</li>
      <li id="item4">Child item 4</li>
    </ul>
  </li>
</ul>

Answer 1

将console.log(theId)移至您的onclick功能中，并确保拨打getItems()以便运行一次以设置所有内容。

jsFiddle

function getItems () {
    var cList = document.getElementById("cMenu");
    var cItems = cList.getElementsByTagName("LI");

    for (var i = 0; i < cItems.length; i++) {

        cItems[i].onclick = function(){
            var theId = this.id;
            console.log(theId);
        };
    }
}
getItems();

Answer 2

适合我：

http://jsfiddle.net/5XSUG/

var listItems = document.getElementsByTagName('li');

for(var i = 0; i < listItems.length; i++)
{
    listItems[i].onclick = function(e)
    {
        e.stopPropagation();
        window.alert(e.target.id);
    }
}

Answer 3

如果您只想获得id的{​​{1}}，那么您可以向所有这些列表项添加某个cList > li > ul > li，以避免向父className添加事件处理程序项目li例如：

cList > li

然后您可以使用此代码获取所点击的<ul id="cMenu"> <li>Parent item 1 <ul> <li class="item" id="item1">Child item 1</li> <li class="item" id="item2">Child item 2</li> </ul> </li> <li>Parent item 2 <ul> <li class="item" id="item3">Child item 3</li> <li class="item" id="item4">Child item 4</li> </ul> </li> </ul> 项的id：

li

请注意，您不必使用var cList = document.getElementById("cMenu"), cItem = cList.getElementsByTagName("li"); for (var i in cItem) { if (cItem[i].className == "item") { cItem[i].onclick = function (event) { event.stopPropagation(); var elm = event.currentTarget || event.srcElement; console.log(elm.id); } } } 包装代码，以便在文档加载时运行，只需在function标记

DEMO