如何在没有jQuery的情况下获取事件目标

Question

我一直在尝试从mouseenter事件中获取目标(<li>元素)，但是到目前为止还没有成功！

代码：

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    var ul = document.getElementById('ul');

    ul.onmouseenter = function(e) {
        console.log(e.target);
    };
</script>

不幸的是，控制台一直打印出<ul />元素。有什么建议吗？

- smaili

Answer 1

由于 onmouseenter 事件不是“冒泡”事件，因此它仅在进入 UL 元素时触发，而不是在进入嵌套元素（如 LI 元素）时触发。

因此，e.target 和 this 元素都将是 UL。

如果使用 onmouseover 替换，则会冒泡，因此当进入 LI 元素时，您将得到 e.target 作为 LI。

- user2736012

---

是的，这是我的直觉，但我还是想问一下 :) - smaili

Answer 2

您可以这样获取目标 li 元素：

function getEventTarget(e) {
    e = e || window.event;
    return e.target || e.srcElement; 
}

var ul = document.getElementById('ul');
ul.onclick= function(event) {
    var target = getEventTarget(event);
    console.log(target.innerHTML);
};

- Vikash Pathak

---

请点击链接查看示例：Js Fiddle - Vikash Pathak

@VikashPathak 谢谢你提供的示例代码，但我实际上是在特别询问 mouseenter 事件 ;) - smaili

@smaili - 也许吧，但是如果你忽略IE事件模型和event.srcElement，你的代码将在一些正在使用的浏览器中失败。 - RobG