如何实现单击Html菜单中的特定列表项时所采取的操作？

Question

这是一个基本问题，但我找不到答案 - 如何实现单击Html菜单中的列表项时所采取的操作？

我在我的代码中使用一个列表作为菜单，说：

<ul  >
<li id="link1"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>

我尝试给菜单一个id，id =“myMenu”和一个onclick事件，并且调用了js，但我找不到一种方法来识别单击了哪个项目，只是在myMenu中单击了一个行项目。

<ul id="myMenu" onclick="gothere(id)">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>

<script type="text/javascript">
function gothere(id)
{
alert("got here "+id) ; 
}
</script>  

我尝试在子元素上添加一个id，id =“link1”，这样就可以了，但是为孩子调用了js，然后为父元素调用了js。

<ul id="myMenu" onclick="gothere(id)">
<li id="link1" onclick="gothere(id)"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>

我可以使用这种方法来获得我需要的但是有更好的方法吗？

我正在寻找能够通过网络发送最少量html的东西（我之所以从它以前的实现重做这个菜单的原因）。

Answer 1

您不应该在线附加事件。 用javascript附上它们。

<ul id="myMenu">
<li id="link1"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2a</a></li>
    <li><a href="#">Link 2b</a></li>
    <li><a href="#">Link 2c</a></li>
  </ul></li>
</ul>​

请注意，我在这里使用jQuery是为了简单：

$("#myMenu").click(function(e){
    console.log(e.target);
});​

http://jsfiddle.net/2rjgd/

使用vanilla javascript的概念是相同的，使用event对象的target属性来找出click事件源自的位置。

http://jsfiddle.net/2rjgd/1/展示了如何用vanilla js实现这一点。 （在非IE浏览器中）

document.getElementById("myMenu").addEventListener("click", function(e){
    console.log(e.target);
});​

Answer 2

识别处理程序中的元素目标或srcElement，不要传递参数：

document.getElementById("myMenu").onclick=goThere;

function goThere(e){
  e= e || window.event;
  var who=e.target || e.srcElement;
  if(who.tagName=='LI'){
    //handle the clicked list item

  }
}

Answer 3

无论如何，您需要一种方法来识别被点击的元素。 Shmiddty为您提供了查找按名称单击的元素的目标的方法。 然后，您可以编写if / then语句来打开窗口或根据特定名称关注链接。

对于您来说，这可能比仅仅为元素分配ID并检查它们更困难/更复杂。 您可以使用如下语句在vanilla js中执行此操作：

var myLink1 = document.getElementById("link1");
myLink1.onclick=window.open("http://www.webaddresshere.com","_self");

我的建议是尽可能使用JQuery。 它可以让你做这样的事情：

$('li[id^=link1]').click(window.open("http://www.webaddresshere.com","_self"));