如果代码段是这样的:
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li><a href="http://example.com">Item 1</a></li>
<li><a href="http://example.com">Item 2</a></li>
<li><a href="http://example.com">Item 3</a></li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li><a href="http://example.com">Item 4</a></li>
<li><a href="http://example.com">Item 5</a></li>
<li><a href="http://example.com">Item 6</a></li>
</ul>
</div>
</div>
我有第一个div的ID“测试”。如何获得点击项的
innerhtml
。例如,当点击<li><a href="http://example.com">Item 1</a></li>
时,提示答案“项目1”。我已经尝试过以下代码var ul = document.getElementById("test").getElementsByTagName('ul')[0];
ul.onclick = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
};
此工作仅适用于第一部分ul。我需要N ul进行相同的操作。什么是最好的方法。提前致谢。
注意:在我的项目中,我无法使用jquery。仅支持javascript或YUI
最佳答案
遍历每个ul
并将点击处理程序添加到其中
var uls = document.getElementById("test").getElementsByTagName('ul');
for (var i = 0; i < uls.length; i++) {
uls[i].addEventListener('click', clickHandler)
}
function clickHandler(event) {
event = event || window.event;
var target = event.target || event.srcElement;
alert(target.getAttribute("href"));
}
<div id="test">
<div>
<h3>First section</h3>
<ul>
<li><a href="http://example.com">Item 1</a></li>
<li><a href="http://example.com">Item 2</a></li>
<li><a href="http://example.com">Item 3</a></li>
</ul>
</div>
<div>
<h3>Second section</h3>
<ul>
<li><a href="http://example.com">Item 4</a></li>
<li><a href="http://example.com">Item 5</a></li>
<li><a href="http://example.com">Item 6</a></li>
</ul>
</div>
</div>
关于javascript - 如何获取具有div ID的li的onclick事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32984755/