Question

如果代码段是这样的：

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

我有id＆＃34; test＆＃34;第一个div。如何获得点击项目的innerhtml。喜欢提醒答案＆＃34;项目1＆＃34;单击<li><a href="http://example.com">Item 1</a></li>时。我已经尝试过以下代码

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 uls做同样的事情。什么是最好的方法。提前致谢。

注意：在我的项目中，我无法使用jquery。仅支持javascript或YUI

Answer 1

迭代每个ul并将点击处理程序添加到

＆＃13;

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"));
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用事件委派来实现预期结果。

将单个事件处理程序绑定到父级，并从event.target

＆＃13;

//Get the object of the div#test
var testDiv = document.getElementById('test');

//Bind onclick event for the div#test object
testDiv.onclick = function(e) {
  
  //Prevent the default href action (optional)
  e.preventDefault();
  
  //Check whether the target element is an Anchor tag
  if (e.target.nodeName == 'A') {
    alert(e.target.innerHTML);
  }
  
}

＆＃13;

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

＆＃13;

如何使用div id获取li的onclick事件

2 个答案: