CODEWITHSUNDEEP
javascripthtmldom-eventsmouseevent
Facu Subiabre
Facu Subiabre

Reputation: 33

JavaScript onmouseover not working as expected

I've got this HTML:

<div onmouseover="seth1();">
    <a onclick="showh1();">h1</a>
    <a onclick="showh2();">h2</a>
</div>

<div id="h1" style="display: none;"></div>
<div id="h2" style="display: none;"></div>

and this Javascript to display automatically h1 after 4 seconds or display one of both when users clicks:

var settime;
function seth1() {
    settime = setTimeout('showh1();', 4000);
}
function showh1() {
    clearTimeout(settime);
    document.getElementById('h1').style.display = "block";
}
function showh2() {
    clearTimeout(settime);
    document.getElementById('h2').style.display = "block";
}

But when I click to show h2 it also shows h1, where am I wrong?

Upvotes: 2

Views: 2214

Answers (3)

Facu Subiabre
Facu Subiabre

Reputation: 33

Thank you two for your help. Now I understand better my problem. I finally solved by this:

HTML

<div id="setter" onmouseover="seth1();" style="height: 10px; width: 100%;">
<div>
    <a onclick="showh1();">h1</a>
    <a onclick="showh2();">h2</a>
</div>

JavaScript

var settime;
function seth1() {
    settime = setTimeOut('showh1();', 4000)
    document.getElementById('setter').style.width = "0px";
}
function showh1() {
    clearTimeout(settime);
    document.getElementById('h1').style.display = "block";
}
function showh2() {
    clearTimeout(settime);
    document.getElementById('h2').style.display = "block";
}

So the user can only trigger seth1() once. Than you so much for your help!

Upvotes: 0

henser
henser

Reputation: 3327

This is happening because in order to click in the element <a onclick="showh2();">h2</a>, you necessarily need to trigger the mouseover event in the wrapper div. If you don't want to trigger the mouseover while clicking on that element you should apply the event listener to that same element and remove it from the wrapper div. You should also try and explore the onmouseenter event. It could suit your particular needs better.

Check this example to see if this is what you're looking for -> https://jsfiddle.net/krbbyzaq/4/

Upvotes: 0

Marc
Marc

Reputation: 6190

Your example works just fine, but stuff happens that you probably didn't expect.

onmouseover gets triggered more than once if you aim too slow with your mouse cursor. If you can manage to set your mouse cursor onto your h2 link really fast, then onmouseover will only be triggered once and your h1 div will not show up.

If you move your mouse cursor too slow, seth1() will be called multiple times, therefore assigning multiple values to settime. If settime is overwritten, the first (few) call(s) cannot be canceled anymore, since their ID is gone.

In your showh2() method you access the current value of settime, so probably only the last call of seth1() will be canceled. All others continue, so your h1 DIV will be displayed four seconds after you hovered your first DIV for the first time.

Test it yourself, check the console logs: https://jsfiddle.net/krbbyzaq/2/

Upvotes: 3

Related Questions