javascript - 为什么 mouseout 处理程序在这种情况下表现得如此不合逻辑？

Question

红色方 block 是容器类“parent”的一部分。如果我将鼠标悬停在那个红色方 block 上，它就会消失。但为什么？我预计它不应该。

预期行为:它不会消失，因为红色方 block 是“.parent”容器的一部分，而且我已经明确说明，mouseout 事件发生在该容器上。

有人建议，这个问题与

JavaScript mouseover/mouseout issue with child element

在某种程度上 - 是的，但我认为这个问题提供了值(value)，因为它不仅提供了解决方案(“你可以试试这个”)，而且还解释了为什么你应该使用它以及为什么初始解决方案不起作用正如它应该的那样。

<span class="parent">Hover mouse over this text<br></span>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    function removeSquare()
    {
        $(this).find(".kvadrat").remove();
    }

    function addSquare()
    {
        $(this).append("<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>");
        $(this).on("mouseout", removeSquare);
    }
    $(".parent").on("mouseover", addSquare);
</script>

Answer 1

这是 .mouseout() 的正常行为事件。

Show the number of times mouseout and mouseleave events are triggered. mouseout fires when the pointer moves out of the child element as well, while mouseleave fires only when the pointer moves out of the bound element.

你应该使用 .mouseenter()和 .mouseleave()事件，

function removeSquare()
{
$(this).find(".kvadrat").remove();
}

function addSquare()
{
    $(this).append ( "<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>" );
    
}
$ ( ".parent" ).on ( "mouseenter", addSquare );
$(".parent").on("mouseleave", removeSquare);

.parent {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="parent">Hover mouse over this text<br></span>