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 />元素。有什么建议吗？

Answer 1

这是因为onmouseenter事件不是“冒泡”事件，所以它只在您输入UL元素时触发，而不是在您输入嵌套元素时触发，例如LI元素

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

如果您使用onmouseover而不是泡沫，那么在输入LI元素时，您将e.target作为LI。

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

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

2 个答案: