列表项 li 父节点上的 Javascript 事件处理程序答案

【问题标题】：Javascript event handler on list item li parent node列表项 li 父节点上的 Javascript 事件处理程序
【发布时间】：2014-05-12 02:06:10
【问题描述】：

我是 javascript 新手，我想创建一个事件 onclick 以列出项目。问题是我想为 li 标签创建一个事件，但是当我单击后代 ul 时它一直在触发。

这是我的部分代码：

<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
   <ul id="ul1223945" class="HTMLItem">
       <li id="1490659" class="HTMLRemainingLevels"></li>
       <li id="483463" class="HTMLRemainingLevels"></li>
       <li id="80919" class="HTMLRemainingLevels"></li>
       <li id="1280053" class="HTMLRemainingLevels"></li>
       <li id="1799353" class="HTMLRemainingLevels"></li>
       <li id="1882209" class="HTMLRemainingLevels"></li>
       <li id="462917" class="HTMLRemainingLevels"></li>
   </ul>
</li>
<li id= ......>
   <ul....>
   <ul...>
</li>

还有我的javascript：

var parentNode = document.getElementById('1660761');

parentNode.addEventListener("click",function(e) {

    alert('Hi There');

});

}

现在我只希望它对 id 为 1660761 的项目 li 触发，而不是列表中的项目。该列表是一个导入的组件，我无法在 html 中创建事件，这就是我在外部使用 javascript 访问它的原因。

现在我通过标签名称扫描 div，然后在内容等于我正在搜索的标签内部 html 时添加“点击”事件侦听器来完成此操作。我留下了对这种方法很重要的 html 的其余部分：

<div id="MainMenu" class="HTMLMenuContainer HTMLMenuHorizontal">
    <ul id="ul1351387" class="HTMLMenu">
        <li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
            <a href="#">
                <span>Back Office</span>
            </a>
            <ul id="ul1172716" class="HTMLItem">
                <li id="1490659" class="HTMLRemainingLevels">
                    <a href="#">
                        <span>

                            Some submenu Here

                        </span>
                    </a>
                </li>
                .....

和代码：

var divs = document.getElementsByClassName('HTMLMenuHorizontal');
var span = divs[0].getElementsByTagName('span');

//I iterate till 19 cause its more than all the spans in the page.
for(var i=0; i<20; i++) {

var sp= span[i];

if(sp.innerHTML==('Back Office')){
   sp.addEventListener("click",function back(){
          //do something here like
          alert('Back Office');  
   });  

}
}

这很好用，它不会在里面的 itens 上开火。这是有效的，因为在我的情况下，itens 不会改变内容，只会改变可见性。我对所有其他有后代的项目做同样的事情。

谢谢大家。

【问题讨论】：

感谢大家的帮助。我用不同的方法解决了这个问题。我不是通过 id 获取元素，而是通过标签名称扫描 div，直到找到我正在寻找的内容，然后如果内容等于我正在搜索的标签内部 html，则添加一个“click”事件侦听器。

标签： javascript html css list html-lists

【解决方案1】：

下面是我针对这个问题的 jQuery 代码：

$(function(){
    $("li.1660761").live("click", onListItemLink);
}

function onListItemLink(){
    alert('Hello World!');
}

这个是 JavaScript 的：

var parentNode = document.getElementById('1660761');
parentNode.onclick = onListItemLink;

function onListItemLink(){
    alert('Hello World!');
}

【讨论】：

【解决方案2】：

看看这个页面来正确理解：

capture event

什么是函数(e-->??)

希望对你有帮助。

【讨论】：

【解决方案3】：

$('#1660761').unbind('click').click(function(e) {
    if (e.target !== this) return;

    alert('Hey There!');
});

试试这个代码：http://jsfiddle.net/sd5LZ/

【讨论】：

本示例使用 jquery 插件