列表项目李父节点上的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，而不是里面的物品列表。 该列表是一个导入组件，我无法在html中创建事件，这就是为什么我使用javascript访问它。

---

现在，这里是我如何scaning标记名称的股利，然后添加一个“点击”事件侦听器，如果含量等于标签内的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不会更改内容，只会显示可见性。 我对所有其他具有后代的itens都做同样的事情。

谢谢大家。

Answer 1

看看这个页面正确undersand：

capture event

，什么是功能（E - >？）

我希望它能帮助。

Answer 2

下面是这个问题我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!'); 
} 

Answer 3

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

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

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