CODEWITHSUNDEEP
javascripthtmlonmouseover
runningmanjoe
runningmanjoe

Reputation: 47

How do I properly handle mouseover if the function obscures the element?

I have a grid composed of many:

<div id="block4-2" class="base" onmouseover="showSubElements(this);" 
     onmouseout="hideSubElements(this)"></div>

showSubElements() creates button elements and adds them to the div's innerHTML:

function showSubElements(divelem) {
    var row = divelem.id[6];
    var col = divelem.id[8];

    var a = document.createElement("BUTTON");
    a.setAttribute("class", "itemA subelem");
    a.setAttribute("id", "button" + col + "-" + row + "a");
    a.setAttribute("onclick", "console.log('TEST');");

    [repeat code for b, c and d]

    var a_str = "<button id=\"" + a.id + "\" " + "onclick=\"" + "console.log(\'TEST\');\" class=\"" + a.getAttribute("class") + "\"></button>";

    [repeat code for b, c and d]

    divelem.innerHTML = a_str + b_str + c_str + d_str;
}

hideSubElements():

function hideSubElements(divelem) {
    divelem.innerHTML = "";
}

The problem with this code is that when the mouse is over the div element it's over the button sub elements too since they are styled to each occupy a quadrant of the box they're in so they flicker as I move the mouse in the box and dissapear when the mouse stops moving.

Upvotes: 0

Views: 116

Answers (1)

Galadai
Galadai

Reputation: 77

This is caused because every mouse movement within the div will cause showSubElements(this) to be executed again.

You should disable showSubElements(this) until the mouse has left the div (onmouseout)

Upvotes: 1

Related Questions