js：為什么mouseenter事件會不停的觸發(fā)？

1、項目中遇到的需求：鼠標進入某個元素，有個小簡介，所以在鼠標停留位置需要顯示一個彈出框。我綁定的是mouseenter 和 mouseleave事件，鼠標進入元素顯示彈出框，離開元素隱藏彈出框。但是鼠標進入元素，在元素里面滑動的時候，彈出框會不停的閃現(xiàn)，特別是鼠標從元素左上角往右下角方向滑動時，彈出框閃現(xiàn)的更厲害。
2、自己上網搜的時候，很多都是說mouseenter和mouseover、mouseleave和mouseout的區(qū)別，我懂它們之間的區(qū)別，我覺得此bug應該與這個無關吧？
3、上代碼，求大神給與解答疑惑，謝謝了~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懸停彈出框</title>
    <style>
        #contain{position: relative;}
        #d1,#d2{
            width:50px;
            height:50px;
            background:pink;
            position:absolute;
            text-align:center;
            line-height:50px;
            top:200px;
            left:400px;
        }
        #d2{background:lightblue;left:700px;}
        #popupBox{
            width:200px;
            height:200px;
            border:1px solid #000;
            background:#ddd;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
    <div id="contain">
        <div id="d1">1</div>
        <div id="d2">2</div>
    </div>
    <!-- 彈出框 -->
    <div id="popupBox"></div>    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        //獲取鼠標位置
        function mouseCoords(e){
            e= e || window.event; 
            if(e.pageX || e.pageY){ 
                return {x:e.pageX, y:e.pageY}; 
            } else{
                return {
                    x:e.clientX + document.body.scrollLeft - document.body.clientLeft, 
                    y:e.clientY + document.body.scrollTop - document.body.clientTop 
                }
            }
        }
        // 綁定事件
        $("#contain").on("mouseenter","div",function(e){
            $("#popupBox").show();
            var mousePos = mouseCoords(e); 
            $("#popupBox").css({
                "top":mousePos.y,
                "left":mousePos.x
            })
        }).on("mouseleave","div",function(){
            $("#popupBox").hide();
        });
    </script>
</body>
</html>

回答

編輯回答

賤人曾

加個鎖，移入的時候確保不會二次彈出

2018年4月16日 04:17

編輯回答

咕嚕嚕

因為移動的時候鼠標進入tooltip了，觸發(fā)了mouseleave事件，然后tip消失又觸發(fā)mouseenter，所以會閃爍

2017年10月23日 21:49

編輯回答

陪她鬧

把onmouseenter換成onmouseover

2017年7月13日 10:57

編輯回答

舊螢火

#popupBox{
    width:200px;
    height:200px;
    border:1px solid #000;
    background:#ddd;
    position:absolute;
    display:none;
    pointer-events: none;
}

給popupBox加上一個pointer-events: none樣式，這樣他就不會響應鼠標事件了

2017年2月17日 22:42

編輯回答

老梗

   var ismouseenter = false // 初態(tài)未移入鼠標
   $("#contain").on("mouseenter","div",function(e){
            if(ismouseenter == true){ //已經移入直接返回
                return;
            } else {
                $("#popupBox").show();
                var mousePos = mouseCoords(e); 
                $("#popupBox").css({
                    "top":mousePos.y,
                    "left":mousePos.x
                })
                ismouserenter = true; // 狀態(tài)設為移入
            }
        }).on("mouseleave","div",function(){
            if(ismouseenter == false){
                return;
            } else {
            $("#popupBox").hide();
            ismouserenter = false;
            }
        });

2018年4月1日 14:37