Как правильно обработать наведение мыши, если функция скрывает элемент? - PullRequest
Новая
       11

Как правильно обработать наведение мыши, если функция скрывает элемент?

0 голосов
/ 16 июня 2019

У меня есть сетка, состоящая из многих: 

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

showSubElements () создает элементы кнопок и добавляет их к внутреннему элементу divHTML: 

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 = "";
}

Проблема с этим кодом заключается в том, что когда мышь находится над элементом div, она также находится над подэлементами button, поскольку каждый из них имеет стилистику, занимающую квадрант поля, в котором они находятся, поэтому они мерцают при движениимышь в коробке и исчезает, когда мышь перестает двигаться.

1 Ответ

1 голос
/ 16 июня 2019

Это вызвано тем, что каждое движение мыши внутри div приведет к повторному выполнению showSubElements (this) .

Вы должны отключить showSubElements (this), пока мышь не покинет div (onmouseout)

...