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是为孩子调用的，然后是父母调用的。

<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时，概念是相同的，使用target对象的event属性来查找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"));

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

3 个答案: