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

Question

我是 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 做同样的事情。

谢谢大家

Answer 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!');
}