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

首先要注意的是我们要给悬浮窗设置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. C++ ORM ODB入门

    1.ORM ORM, Object Relational Mapping, 对象关系映射,用来将基于对象的数据结构映射到SQL的数据结构中.即将基于对象的数据映射到关系表中的字段,然后我们可以通过对象 ...

  2. Python模块-configparse模块

    configparse模块用来解析配置文件 配置文件 [DEFAULT] port = 3306 socket = /tmp/mysql.sock [mysqldump] max_allowed_pa ...

  3. AES算法的c++实现

    该模板无填充操作. 1.AES.h #include<cstdio> #include<cstring> #include<algorithm> #include& ...

  4. TCP的三次握手和四次挥手，为什么？

    首先,我们要知道TCP是全双工的,即客户端在给服务器端发送信息的同时,服务器端也可以给客户端发送信息.而半双工的意思是A可以给B发,B也可以给A发,但是A在给B发的时候,B不能给A发,即不同时,为半双 ...

  5. Hive 进阶

    两种情况下不走map-reduce: 1. where ds >' ' //ds 是partition 2. select * from table //后面没有查询条件,什么都没有 1.建表 ...

  6. 《精通Spring4.X企业应用开发实战》读后感第六章（内部工作机制、BeanDefinition、InstantiationStrategy、BeanWrapper）

  7. p2345 奶牛集会

    传送门 题目 约翰的N 头奶牛每年都会参加“哞哞大会”.哞哞大会是奶牛界的盛事.集会上的活动很 多,比如堆干草,跨栅栏,摸牛仔的屁股等等.它们参加活动时会聚在一起,第i 头奶牛的坐标为Xi,没有两头奶 ...

  8. JS中apply和call的用法

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象. cal ...

  9. 快速搭建LAMP

    1.安装Apache sudo apt-get install apache2 2.安装Mysql sudo apt-get install mysql-server 中间会出现输入 Mysql 的 ...

  10. C语言函数调用的底层机制

    由这个文章引入吧(百度文库:http://wenku.baidu.com/link?url=aAm1tBg4okqIyFAmfgrJBHdPDrri5LUEKrJjn-dNITds5lwSm550DT ...