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

这是一个如此基本的问题，但我很难找到答案-当单击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）；
}

我尝试在子元素上添加一个id，id=“link1”，这很有效，但是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的东西（这就是我从以前的实现中重做此菜单的原因）

您不应该内联附加事件。用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>​

对于vanilla javascript，概念是相同的，使用

事件

对象的

target

属性找出

单击

事件的起源

显示了如何使用vanilla js实现这一点。（在非IE浏览器中）

---

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

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

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

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

如果可以，我建议使用JQuery。它允许您执行以下操作：

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

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

---

在处理程序中标识元素目标或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

  }
}

---

我突然想到，可能有一个比这两个更简单的解决方案。列表项上的链接应该做什么？这些链接创建一个带有parms和branch的url。我原来的想法不适用。您可以使用individual ID方法，也可以使用shmiddy的代码并分别标识它们，然后执行如下操作：if（e.target==link1）{//dosomethine here}；IE使用

attachEvent

。在谷歌上搜索“javascript跨浏览器事件处理”或类似内容。这方面有大量的资源可供使用。下面我们将咬紧牙关学习jquery。早就应该这么做了。@Lillansey与使用香草javascript完成同样的任务相比，它实际上相当简单。