列表項目李父節點上的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/