javascript - 如果函数遮盖了元素，如何正确处理鼠标悬停？

Question

我有一个由许多组成的网格:

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

showSubElements() 创建按钮元素并将它们添加到 div 的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;
}

隐藏子元素():

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

这段代码的问题是，当鼠标悬停在 div 元素上时，它也会悬停在按钮子元素上，因为它们的样式设置为每个元素都占据它们所在框的一个象限，因此当我将鼠标移入时它们会闪烁当鼠标停止移动时，该框就会消失。

Answer 1

这是因为 div 内的每次鼠标移动都会导致 showSubElements(this) 再次执行。

您应该禁用 showSubElements(this)，直到鼠标离开 div (onmouseout)