javascript - How to get event target without jQuery - Stack Overflow

admin管理员组

文章数量:1023794

I have been trying to get the target (<li> element) from the mouseenter event but so far no luck!

The code:

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

Unfortunately the console keeps printing the <ul /> element. Any suggestions?

I have been trying to get the target (<li> element) from the mouseenter event but so far no luck!

The code:

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

Unfortunately the console keeps printing the <ul /> element. Any suggestions?

• javascript
• html

Share Improve this question Follow asked Oct 16, 2013 at 4:31 smailismaili 1,23599 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's because the onmouseenter event is not a "bubbling" event, so it only fires when you enter the UL element, not when you enter nested elements, like the LI elements.

Therefore the e.target and the this elements will both be the UL.

If you use onmouseover instead it'll bubble, so you'll get the LI as the e.target when entering the LI elements.

You can get the targeted li like:

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

I have been trying to get the target (<li> element) from the mouseenter event but so far no luck!

The code:

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

Unfortunately the console keeps printing the <ul /> element. Any suggestions?

I have been trying to get the target (<li> element) from the mouseenter event but so far no luck!

The code:

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

Unfortunately the console keeps printing the <ul /> element. Any suggestions?

• javascript
• html

Share Improve this question Follow asked Oct 16, 2013 at 4:31 smailismaili 1,23599 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's because the onmouseenter event is not a "bubbling" event, so it only fires when you enter the UL element, not when you enter nested elements, like the LI elements.

Therefore the e.target and the this elements will both be the UL.

If you use onmouseover instead it'll bubble, so you'll get the LI as the e.target when entering the LI elements.

You can get the targeted li like:

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

本文标签： javascriptHow to get event target without jQueryStack Overflow