如何在鼠标悬停在父元素上时获取子元素的ID

Question

我猜我的问题相当简单，但我是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）事件，但是对于5个li需要10个监听器的脚本太复杂了...

这就是我想到以下的脚本：

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）

- hggjvhkkfkhftrjghvgfgj

---

你要找的是事件委托。 - Phil

这个问题更适合在这里提问：http://codereview.stackexchange.com/ - redexp

Answer 1

为了获取鼠标悬停元素的ID，您需要使用event.target。为此，您需要在函数中传递event作为参数。
然后，您可以获取该元素的.id属性。

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

Demo here

- Sergio

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

- redexp

Answer 3

在子元素上放置事件。

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

- gurvinder372

---

谢谢您的回答，但是这个脚本和使用上面的event.target的简短方法之间有什么特别的优势吗？ - hggjvhkkfkhftrjghvgfgj

@user2886084 是否起作用了？您的脚本如何知道它们需要获取子级 ID 而不是父级 ID？此外，如果子 'li' 还有其他子元素，那么此代码将根本不可靠。因为它将从最小的子元素冒泡上来。 - gurvinder372

哦，我明白了，当然我的<li>是用来包含<a>的，正如你所说，带有event.target的脚本不起作用（但通过将<a>放在<li>周围很容易解决）。 但也许最终我会采用你的解决方案 :) - hggjvhkkfkhftrjghvgfgj

Answer 4

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

并且

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

- Barrie Reader

---

我愿意保持纯JS，没有jQuery。 - Daniel W.

糟糕！我会把这个留在这里，以防万一 ;) - Barrie Reader

这是一个特别糟糕的表达方式吗？正如你所看到的，我的英语并不完美。 - hggjvhkkfkhftrjghvgfgj

没事，完全没问题。我只是没有注意到 :) - Barrie Reader