js 鼠標移除元素時觸發 移到子元素 不會觸發

    <div id="div1" style="width: 300px;height: 300px;background-color: aquamarine; padding-top: 20px;">
        <div style="width: 100px;height: 100px;background-color: white;margin-left: 20px;">

        </div>
    </div>

    <script>
        var t = document.getElementById("div1");
        //  mouseover mouseout：  在鼠標進入或者離開作用元素或者其子元素時，都會觸發
 /*        t.addEventListener("mouseout", function () {
            console.log(11);
        }); */

        //mouseenter mouseleave：在鼠標移出作用元素的時候才會觸發。
        t.addEventListener("mouseleave", function () {
            console.log(11);
        });