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;
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事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）的更多相关文章
- js事件之神奇的onclick
21:58 2013/7/1 <a href="#" onclick="alert(123124);" >链接</a> 意思是鼠标点击链 ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- JS缓冲运动案例：右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS事件 鼠标单击事件( onclick ）通常与按钮一起使用。onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行
鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 比如,我们单击按钮时,触发 ...
- Android 悬浮窗、悬浮球开发
原文:Android 悬浮窗.悬浮球开发 1.权限管理 直接看我另外一篇博客吧,传送门: https://my.oschina.net/u/1462828/blog/1933162 2.Base类Ba ...
- 深入理解DOM事件类型系列第一篇——鼠标事件
× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...
- C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
- js事件、Js中的for循环和事件的关系、this
一.js事件 1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...
随机推荐
- 2017-2018-1 20179215《Linux内核原理与分析》第八周作业
实验:ELF文件格式与程序的编译链接 一.可执行文件的创建 从源代码到可执行程序所要经历的过程概述: 源代码(.c .cpp .h)经过c预处理器(cpp)后生成.i文件,编译器(cc1.cc1p ...
- bzoj 1101 Zap —— 莫比乌斯反演
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1101 直接莫比乌斯反演. 代码如下: #include<cstdio> #inc ...
- 排成一行的li之间的间隙问题
现象 对于ul下li排成一行的布局(即li的display由list-item设为inline-block): 情况1 如果这些li在书写的时候有换行或者有空格,且ul本身的font-size不为0, ...
- mac下无法远程桌面连接win10的解决办法
原文链接:http://www.hangge.com/blog/cache/detail_899.html 原来在Mac OSX下远程win7系统很正常,后来把windows系统升级成了win10,再 ...
- idea-spark-sbt 打包jar
1.打开idea下的terminal窗口 2.只打包部分项目 sbt insight-import/clean insight-import/assembly 这表示只打包主目录下的insight- ...
- js拼的onclick调用方法需要注意的地方 之二
那如果之前的方法不行,想传递json对象怎么办呢? 使用下面这种方法, getA = function(){ var obj = {'projectId':123,'projectName':'aac ...
- js中一些小知识点总结--持续更新
以下知识点来自于编写高质量代码-改善JavaScript程序的188个建议,只用于自我知识的补充. 一.NaN 1.NaN是一个特殊的数量值,不表示一个数字,尽管下面的代码仍然是返回类型为number ...
- 韩顺平循序渐进学JAVA从入门到精通 视频全套，需要的联系我
0讲-开山篇.avi 10讲-访问修饰符.重载.覆盖.avi 11讲-约瑟夫问题.avi 12讲-多态.avi 13讲-抽象类.接口.avi 14讲-final.作业评讲.avi 15讲-作业.测试题 ...
- play 1.2.4的action执行前后的加载逻辑
——杂言:最近在整理这一年的笔记,打算慢慢温故一遍,然后搬到博客里头来.这篇是2013.06.18时候整理的关于action执行前后的一些载入先后顺序逻辑.我的理解可能有偏差,如果有错误的,请读者们及 ...
- 进击的菜鸟问题1（设置checkbox全选）
问题:设置页面标签属性时,常常使用jquery.attr("","");在设置checkbox属性时,会出现操作设置checkbox属性后,无法清除,导致第二次 ...