JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）

最新推荐文章于 2024-05-08 20:41:00 发布

weixin_30955617

最新推荐文章于 2024-05-08 20:41:00 发布

阅读量618

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/can-i-do/p/7371828.html

版权

鼠标进入显示悬浮窗，思路有简单有困难。

首先要注意的是我们要给悬浮窗设置position为absolute，不然我们改了 style.left style.top发现没有变化很尴尬。其余的内容看起来就很明了了。

style部分

        html,div,h1{margin: 0;padding: 0;}
        body{
            background: #DE9191;
        }
        #box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
            width: 100px;
            height: 100px;
            background: #3A48E6;
        }
        #popover{
            position: absolute;
            border: 2px solid #fa1ef1;
            color: #fff;
            width: 200px;
            display: none;
        }

body部分

<body>
    <div id="box"></div>
    <div id="popover">
        <h1>I'm header</h1>
        <span>I'm message</span>
    </div>
</body>

JS部分

    var oBox=document.getElementById("box");
    var oPop=document.getElementById("popover");
    oBox.onmouseover=function(event){
        var event=event||window.event;
            // flag=true;
        document.onmousemove=function(event){
            // if(!flag) return ;
            oPop.style.left=event.clientX+"px";
            oPop.style.top=event.clientY+"px";
            oPop.style.display="block";
        }
    }
    oBox.onmouseout=function(){
        // flag=false;
        oPop.style.display="none";
    }

然而还是我想简单了，乍一看这个移动十分流畅，然而当改动了 onmouseout 的时候，popover框就出现了跳动和闪动的情况。

好了，我们可以开始百度/谷歌解决问题了。

已经找到解决方案，问题的原因是这样的：我们自己移动鼠标的时候，有时候会将鼠标移动到悬浮窗上，也就是在这个时候产生的抖动，我们的代码没有跟上我们的手速。

总之就是 onmouseover 被我们自己设置的悬浮层给遮盖住了。所以我们只要让鼠标不触发在悬浮窗的事件即可。

在我们的 popover css中加上这么一句话

pointer-events: none;

至此之后，我们的 popover 就与我们的鼠标隔绝了，我们的鼠标永远都在我们的oBox上悬浮，自然也不会发生抖动了。

但是，实际上这是有问题的。因为一般情况下，我们的悬浮窗应该是可以被鼠标放上去的，这明显与实际不符。

转载于:https://www.cnblogs.com/can-i-do/p/7371828.html

weixin_30955617

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）

鼠标进入显示悬浮窗，思路有简单有困难。首先要注意的是我们要给悬浮窗设置position为absolute，不然我们改了 style.left style.top发现没有变化很尴尬。其余的内容看起来就很明了了。style部分 html,div,h1{margin: 0;padding: 0;} body{ background:...
复制链接

扫一扫