CODEWITHSUNDEEP
javascriptonmouseoveronmouseout
devmonster
devmonster

Reputation: 1739

javascript onmouseout works also on mouse over

I'm trying to show/hide some of text in a button. the button is 

<button id="SOS" onmouseover="show()" onmouseout="hide();">
    <p>S.O.S</p>
    <div id="sos_left"> <?=$text_to_show_hide?></div>
</button>

and the javascript code is

<script type="text/javascript">
function show()
    {
        sos_left=document.getElementById('sos_left');
         alert("mouseover");
         sos_left.style.color = "red";
         sos_left.style.fontSize = "28";

    }
function hide(){

       sos_left=document.getElementById('sos_left');
       alert("mouseout");
       sos_left.style.color = "blue";
       sos_left.style.fontSize = "0";
}
</script>

the thing is that the mouse out alerts even when I'm mouse overing.

NOTE: I can't use jquery because the site is vbulletin based and I use this code on one of the templates.

Upvotes: 1

Views: 2017

Answers (3)

MaxArt
MaxArt

Reputation: 22617

The problem is that mouseover and mouseout events bubble up, and this means that when your cursor enters and exits from elements that are descendants of your button, the event listener defined on the button is triggered too.

What you can do is to check if the element that generated the event is actually the <button> element. Fix the DOM like this:

<button id="SOS" onmouseover="show(event)" onmouseout="hide(event);">...

Then your JS code:

function show(e) {
    if ((e.target || e.srcElement).id !== "SOS") return;
    ...

function hide(e) {
    var tgt = e.target || e.srcElement;
    if (tgt.id !== "SOS") return;
    // If the cursor enter in one of the descendants, mouseout is fired, but
    // we don't want to handle this
    if (tgt.contains) {
        if (tgt.contains(e.relatedTarget || e.toElement)) return;
    } else if (this.compareDocumentPosition)
        if (tgt.compareDocumentPosition(e.relatedTarget)
                & Node.DOCUMENT_POSITION_CONTAINS) return;
    ...

In Internet Explorer (and now in Opera too) there are these events mouseenter and mouseleave that behave very similarly, but don't bubble up. For other browsers they're emulated in common frameworks like jQuery.

On a final note, I'd suggest you to use some more modern method to attach your event listeners than the traditional one. Plus, the way you define sos_left implies that it becomes a global variable. Use the keyword var in front of the definition.

Upvotes: 3

Someth Victory
Someth Victory

Reputation: 4549

That's because you apply the event to the div not the button. Try this:

sos_button=document.getElementById('SOS');

Upvotes: 0

nimrod
nimrod

Reputation: 132

you dont hide anything..

use display:none to "remove" element, or visibility:hidden to hide element.

to "re-add" the element, use display: block or visibility:visible, if you used visibility attribute to hide.

try each both to see the difference.

another problem is,

you try to use sos_left as variable, but you didn't declare it as variable.

use var sos_left instead of.

Upvotes: 0

Related Questions