一個很簡單的問題,卻因為大意,經常忘了處理,導致程序運行出錯.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li> <ul> <li>listone</li> <li>listtwo</li> <li>listthree</li> </ul> </li> </ul> <script> var oUl=document.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++){ aLi[i].onclick=function(){ alert(this.innerHTML); } } </script> </body> </html>
我的本意是要在點擊li的時候,彈出li的內容. 比如 "listone" ,"listtwo","listthree".
可是上述代碼並不像想象中那樣工作.
當我點擊listtwo的li時,情況是這樣的:
還沒完,點擊確定,又彈出一個框子:
這個框子並不是我們所期望彈出的東西.拿他為什么彈出呢?
回頭看代碼,這是因為listone,listtwo,listthree所在的UL的父元素,也是一個li,這個li也被加上了點擊事件,彈出自己的innerHTML.
如何解決?
只要我們告訴javascript,只彈出我們點擊的那個li的內容就可以了.就是觸發點擊事件的那個li.代碼如下:
var oUl=document.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var i=0; for(i=0;i<aLi.length;i++){ aLi[i].onclick=function(ev){ var e=ev||window.event;//獲取事件 var ele=e.target||e.srcElement;//獲取觸發事件的元素
if(this===ele)//如果這個元素就是觸發事件的元素 alert(ele.innerHTML);//彈出他的內容 } }
問題解決.