Javascript getEventTarget?

Question

I'm writing a code currently, and it's working good so far, however, my "onmouseout" command doesnt work properly. Ill give you the .js first:

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

var ul = document.getElementById('index_cards');
ul.onclick = function (event) {
    var target = getEventTarget(event);
    if(target.tagName != 'LI')
    target = target.parentNode;
    if(hasClass(target, 'active'))
        target.className='';
    else
        target.className='active';
}
ul.onmouseout = function (event){
    var target = getEventTarget(event);
    if(target.tagName != 'LI')
    target = target.parentNode;
    if(hasClass(target, 'active'))
            target.className='';
}

function hasClass(el, className){
    return new RegExp(className). test(el.className);   
}

So this is what happens: When I leave the li element, the effect works, but same goes for inside the element. If I move outside of a tag inside the html element(move out of <p> or out of <img>) the effect applies as well. I only want to apply the onmouseout to the li element though. What am I doing wrong?

Edit: Code works now, the solution was like this:

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

function onMouseOut(event) {
        e = event.toElement || event.relatedTarget;
    if (e.parentNode == this || 
                           e == this) {
      return;
    }
    var target = getEventTarget(event);
    if(target.tagName != 'LI')
    target = target.parentNode;
    if(hasClass(target, 'active'))
            target.className='';
};

var ul = document.getElementById('index_cards');

ul.addEventListener('click', function(event){

    var target = getEventTarget(event);
    if(target.tagName != 'LI')
    target = target.parentNode;
    if(hasClass(target, 'active'))
        target.className='';
    else
        target.className='active';

    target.addEventListener('mouseout', onMouseOut, true);
});

function hasClass(el, className){
    return new RegExp(className). test(el.className);   
}

Would you mind putting up a jsFiddle to demonstrate the issue? — emerson.marini, Aug 07 '14 at 14:40
You're experiencing _bubbling_. You can check the `event.fromElement` and `event.toElement`. — emerson.marini, Aug 07 '14 at 14:48
You need to signup to jsFiddle (create an account), so you can save it. It wasn't like this before. I think they just changed recently. But it's still free anyway. — emerson.marini, Aug 07 '14 at 15:13
@MelanciaUK it still doesnt work :-/ I will specify the problem in the main post — Frederik Witte, Aug 07 '14 at 15:19
This might be helpful: [Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery](http://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou) — emerson.marini, Aug 07 '14 at 15:20
Hey MelanciaUK, I have been searching for this for so long! I don't quite understand the whole thing, but it solves the problem. There is no easier way, right? If not I will try to understand what he posted. — Frederik Witte, Aug 07 '14 at 15:24
Can you post a comment so I can choose you as the best answer? — Frederik Witte, Aug 07 '14 at 15:28
I've just pointed out another post, so I actually didn't answer to your question. — emerson.marini, Aug 07 '14 at 15:39
It works now, thank you Melancia! I think the code needs to be a lil cleaned up, but atleast I got it to work now. The Problem was, that the onmouse thing was triggered everytime there was an element left, and not triggered when only the target was left. So I had to add the event listener to target — Frederik Witte, Aug 11 '14 at 13:38

score 0 · Answer 1 · answered Aug 07 '14 at 14:31

0

Try e.currentTarget instead of e.target.

answered Aug 07 '14 at 14:31

Jonathan Lerner

450
1
4
11

Hey, thank you for your reply, if you mean to add it at the getEventTarget function, then it sadly doesnt work :/. Then the onclick parameter doesnt even work anymore – Frederik Witte Aug 07 '14 at 14:39
Can you create http://jsfiddle.net or something similar to fully illustrate the problem? Or at least include full HTML+JS sample code? – Jonathan Lerner Aug 07 '14 at 14:40

Javascript getEventTarget?

1 Answers1