如果代码段是这样的:

<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/

10-12 13:17
查看更多