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

How to get event target without jQuery

本文关键字：情况下 获取 事件 目标 jQuery      更新时间：2023-09-26

我一直在尝试从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 />元素。有什么建议吗？

这是因为 onmouseenter 事件不是"冒泡"事件，因此它仅在您输入 UL 元素时触发，而不是在您输入嵌套元素（如 LI 元素）时触发。

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

如果你使用onmouseover它会冒泡，所以在输入LI元素时，你会得到LI作为e.target。

你可以得到目标的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);
};
相关文章：