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

首先要注意的是我们要给悬浮窗设置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上悬浮，自然也不会发生抖动了。

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

JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）的更多相关文章

  1. js事件之神奇的onclick

    21:58 2013/7/1 <a href="#" onclick="alert(123124);" >链接</a> 意思是鼠标点击链 ...

  2. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  3. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  4. JS缓冲运动案例：右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  5. JS事件 鼠标单击事件( onclick ）通常与按钮一起使用。onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行

    鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 比如,我们单击按钮时,触发  ...

  6. Android 悬浮窗、悬浮球开发

    原文:Android 悬浮窗.悬浮球开发 1.权限管理 直接看我另外一篇博客吧,传送门: https://my.oschina.net/u/1462828/blog/1933162 2.Base类Ba ...

  7. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  8. C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件

    一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...

  9. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

随机推荐

  1. bzoj 3779: 重组病毒 LCT+线段树+倍增

    题目: 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策划了一次实验,来研究这种病毒. 实验在一个封闭 ...

  2. OpenStack、CloudStack、Eucalyptus和vCloud Director四大主流云平台怎么选？

    软件产品开发公司Altoros Systems的IT基础设施设计师Vadim Truksha在美国<网络世界>上发表一篇文章,详细对比了CloudStack.Eucalyptus.vClo ...

  3. Azure自动化部署服务 (1)

    Azure中已经发布了自动化部署服务的PaaS功能. 本文将介绍自动化服务Automation初始化过程. 在Azure Management Portal上左边可以看到Azure的各种服务,其中一项 ...

  4. SQL SERVER 中的*=和=*

    一.* =和= * 是在sql server2000中左连接,右连接的用法相当于left join 和right join,现在sql2005和2008默认是不支持的,可以设置兼容2000或2008 ...

  5. Select\Poll\Epoll异步IO与事件驱动

    事件驱动与异步IO 事件驱动编程是一种编程规范,这里程序的执行流由外部事件来规定.它的特点是包含一个事件循环,但外部事件发生时使用回调机制来触发响应的处理.另外两种常见的编程规范是(单线程)同步以及多 ...

  6. 【转】 Pro Android学习笔记（六十）：Preferences（4）：MultiSelect List Preference

    目录(?)[-] XML文件 在设备中保存 读出信息 ListPreference提供单选列表,我们可以通过CheckBoxPreference提供多选列表.此外,Android在3.0后提供Mult ...

  7. AD9各种布线总结

    1.常规布线:不详细说了,是个人就知道怎么弄.需要说明的是在布线过程中,可按小键盘的*键或大键盘的数字2键添加一个过孔:按L键可以切换布线层:按数字3可设定最小线宽.典型线宽.最大线宽的值进行切换. ...

  8. java继承示例

    package day07; class Fu { int num = 5; } class Zi extends Fu { int num =7; void show() { int num =9; ...

  9. shell入门-cut命令

    命令:cut 选项:-d:-f  指定第几段由“:(分割符)”分割的段 -c    指定第几个字符 说明:选取命令,选取一段数据中我们想要的,一般是针对每行来分析选取的 [root@wangshaoj ...

  10. js数组中的reverse()方法

    reverse方法是将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组.由于本人是学习js的新人,对reverse函数进行了几个小实验,以下实验均在Chrome浏览器上运行 实验一:reve ...