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

首先要注意的是我们要给悬浮窗设置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. ffmpeg第三方库编译记录

    最近在研究ffmpeg的编译,之前使用的Ubuntu,需要安装虚拟机,非常麻烦,所以后来改研究在Windows平台编译. 一开始遇到很多挫折,参考了网上很多的帖子,但要么不全要么内容已过期,经过我的反 ...

  2. G 唐纳德与子串(easy)（华师网络赛---字符串，后缀数组）(丧心病狂的用后缀自动机A了一发Easy)

    Time limit per test: 1.0 seconds Memory limit: 256 megabytes 子串的定义是在一个字符串中连续出现的一段字符.这里,我们使用 s[l…r] 来 ...

  3. rman命令详解(三)

    1. Report 命令用户判断数据库的当前可恢复状态和提供数据库备份的特定信息1.1 指定最近没有备份的数据文件查询3天内没有备份过的表空间,可以用如下命令:RMAN> report need ...

  4. UOJ#164：【清华集训2015】V

    浅谈区间最值操作与历史最值问题:https://www.cnblogs.com/AKMer/p/10225100.html 题目传送门:http://uoj.ac/problem/164 论文题.论文 ...

  5. 用遗传算法解决TSP问题

    浅谈遗传算法:https://www.cnblogs.com/AKMer/p/9479890.html Description \(小m\)在踏上寻找\(小o\)的路程之后不小心碰到了大魔王\(fat ...

  6. JQUERYUI 框架 http://jqueryui.com/

    http://jqueryui.com/

  7. Java中读取输入方式的性能比较

    程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ...

  8. MyBatis总结（1）

    MyBatis前身是ibatis,是一个数据持久层框架.封装优化了普通JDBC过程, 如数据库连接的创建.设置SQL语句参数.执行SQL语句.事务.结果映射以及资源释放等. MyBatis是一个支持普 ...

  9. phpstorm断点调试 php.ini 文件中 Xdebug 配置

    [XDebug]xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug"xdebug.trace_output_dir="D ...

  10. Ubuntu 12.04 LTS为例演示vsftpd虚拟用户 的配置

    vsftpd虚拟用户   2012-05-19 15:46:59|  分类: GNU/Linux |  标签:ubuntu  vsftpd  ftp  虚拟用户  |举报|字号 订阅 我们登录FTP有 ...