鼠标悬停父项时如何获取子项的ID

时间:2013-10-16 11:18:18

标签: javascript html javascript-events

我想我的问题很简单,但我是javascript的初学者,我找不到我要找的东西:

我正试图在鼠标悬停在导航或ul上时获取li的ID ... 我的HTML结构将是:

<nav><ul id="menu">
<li id="FirstLink">Link1</li>
<li id="SecondLink">Link2</li>
<li id="ThirdLink">Link3</li>
</ul></nav>

所以我的目标是在每个li上监听mouseover(和mouseout)事件,但是一个带有10个监听器(5 li)的脚本太脏了......

这就是为什么我想到一个像:

这样的剧本
var menu = document.getElementById("menu");
menu.addEventListener('mouseover', myFunction, false);

function myFunction () {
//something that get the ID of the <li> that is currently under the mouse and can put it inside a variable as "Link1"
}

但如果有更好的解决方案,我会很高兴知道它! (我想留在纯粹的js)

4 个答案:

答案 0 :(得分:2)

var menu = document.getElementById("menu");
menu.addEventListener('mouseover', myFunction, false);

function myFunction (event) {
    var li = event.target;
    if( li.nodeName !== 'li' ) return;

    // do your stuff with li
}

答案 1 :(得分:2)

要获取悬停元素的ID,您需要使用event.target 为此,您需要将event作为参数传递给您的函数 然后,您可以获得该元素的.id属性。

function myFunction(event) {
    show_result.innerHTML = event.target.id;
}

演示here

答案 2 :(得分:1)

仅将事件放在子元素上

var menu = document.getElementById("menu");
for( var counter = 0; counter< menu.childNodes.length; counter++)
{
    menu.childNodes[ counter ].addEventListener('mouseover', function(){
      alert( "id is  " + this.id  ); 
    }, false);
}

答案 3 :(得分:-1)

http://jsfiddle.net/neuroflux/ssSnN/

$('#menu').children("li").on('mouseover', function() {
    var childID = $(this).attr("id");
    //YOUR ID WILL BE childID!
});