• JS事件之鼠标悬浮窗(鼠标悬浮窗抖动问题的解决)


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

    首先要注意的是我们要给悬浮窗设置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;
    			 100px;
    			height: 100px;
    			background: #3A48E6;
    		}
    		#popover{
    			position: absolute;
    			border: 2px solid #fa1ef1;
    			color: #fff;
    			 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上悬浮,自然也不会发生抖动了。


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

  • 相关阅读:
    Qt之表单布局(QFormLayout)
    Qt之格栅布局(QGridLayout)
    Qt之水平/垂直布局(QBoxLayout、QHBoxLayout、QVBoxLayout)
    Qt之手动布局
    MAC OS下JDK版本切换指南
    Qt之自定义布局管理器(QBorderLayout)
    Qt之自定义布局管理器(QFlowLayout)
    Qt之自定义布局管理器(QCardLayout)
    springMVC获取file,几种转换
    java将白色背景图片转换成无色
  • 原文地址:https://www.cnblogs.com/can-i-do/p/7371828.html
走看看 - 开发者的网上家园