onmouseover和onmouseout的那些事
这篇文章来自一个偶然。。。
以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的。就是一对名字很相近的事件。一组是onmouseover()和onmouseout()。另一组就是onmouseenter()和onmouseleave()。后来自己看博客加上自己的练习终于搞明白了这两组的区别。ommouseover()和onmouseout()表示鼠标移入和移出时触发。onmouseenter()和onmouseleave()表示的是鼠标穿过和穿出的时候触发。是不是还不太明白。。那么再具体一点就是假设onmouseenter()和onmouseleave()其内部有子元素的话,则在其对象内部穿过子元素时不会触发。很简单看个例子
http://www.jb51.net/article/40560.htm
话说回来像我这样的人怎么可能来分享别人分享过的东西呢,当然是碰到了一个问题哈。等会下面贴代码
最后要达到的效果大概如下图
开始页面只显示一个灰色的框,内容就是“显示”。(图一)
当鼠标移入到显示上边时,效果如下,出现一个浅灰色的表单。表单嵌在一个div里。(图二)
然后当你在鼠标在浅灰色的框内任意移动时,表单还依然在。当你鼠标移出表单时,这个表单就会消失,恢复到图一的状态只有一个“显示”按钮。本来onmouseover加上onmouseout配合使用这个并不会有什么问题,这个表单大概每天都会写到,这个应该算是很基础的东西。
但是问题来了,我这人就是吃饱了没事做,要是只加onmouseout()不加onmouseover()事件时,当移到"显示"上,表单显示,但是从上边移入表单,比如从“显示”移入到输入框时,表单就神奇的消失了。后来也想了一会想不到为什么不加onmouseover()时,移入表表单就会消失,难道这个表单不属于此div吗,于是我又加上了onmouseover()事件,效果又正常了。
<div id="box">
<p id="show" onmouseover="document.getElementById('login').style.display='block'">显示</p>
<div id="login" onmouseout="document.getElementById('login').style.display='none'"> <!-- div默认不显示 -->
<input type="text" placeholder="网易邮箱"><br>
<input type="password" placeholder="请输入密码">
<div>
<input type="checkbox" style="width:20px;">十天内免登录<span>忘记密码?</span>
<P>免费下载网易官方手机邮箱应用</P>
</div>
<button>登录</button>
</div>
</div>
然后我懂了,这个表单元素是外部div元素的子元素,当从“显示”移到表单的输入框时,不加onmouseover(),只有onmouseout()事件,会立即触发onmouseout()事件,于是就是从“显示”按钮移入表单经过输入框时,表单会消失。当加上onmouseover()时,同样的路线,虽然会触发onmouseout()事件,但同时也会触发onmouseover()事件。于是情况就正常了。。
还有我就想onmouseleave()效果应该等同与同时加上以上两个事件,果不其然,只加onmouseleave()效果不变。原因就是开头说过的假如onmouseenter()和onmouseleave()其内部有子元素的话,则在其对象内部穿过子元素时不会触发。
代码如下
<div id="box">
<p id="show" onmouseover="document.getElementById('login').style.display='block'">显示</p>
<div id="login" onmouseleave="document.getElementById('login').style.display='none'"> <!-- div默认不显示-->
<input type="text" placeholder="网易邮箱"><br>
<input type="password" placeholder="请输入密码">
<div>
<input type="checkbox" style="width:20px;">十天内免登录<span>忘记密码?</span>
<P>免费下载网易官方手机邮箱应用</P>
</div>
<button>登录</button>
</div>
</div>
于是愉快的解决了问题。。
终。
onmouseover和onmouseout的那些事的更多相关文章
- 关于onmouseover和onmouseout的bug
总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...
- JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系
hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...
- onmouseover和onmouseout的烦恼
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout. 非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进 ...
- 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup
一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...
- JS:onmouseover 、onmouseout
鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...
- 【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】
1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById(&q ...
- Repeater控件添加onmouseover和onmouseout事件
网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...
- onmouseover和onmouseout的bug
脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...
- HTML事件(onclick、onmouseover、onmouseout、this)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- C#/ASP.NET MVC微信公众号接口开发之从零开发(三)回复消息 (附源码)
C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...
- Top Five Hacker Tools Every CISO Should Understand
As the role of the CISO continues to evolve within organizations towards that of an executive level ...
- JVM-程序编译与代码晚期(运行期)优化
晚期(运行期)优化 1.为了提高热点代码的执行效率,在运行时,虚拟机将会把这些代码编译成与本地平台相关的机器码,并进行各种层次的优化,完成这个任务的编译器称为即时编译器(Just In Time,JI ...
- 北大poj-1062
昂贵的聘礼 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 43523 Accepted: 12760 Descripti ...
- C语言实现快排
#include <stdio.h> void swap(int *pa, int *pb) { int t = *pa; *pa = *pb; *pb = t; } int partio ...
- Polymer.js
Polymer 1.0 教程 安装 bower install --save Polymer/polymer
- LintCode Binary Tree Maximum Path Sum
Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...
- 神奇的盒模型(BFC)
上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...
- c++作用域运算符---7
原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ ::是C++里的“作用域运算符”. 比如声明了一个类A,类A里声明了一个成员函数void f(),但没有 ...
- pods的安装和使用
//// pods的安装.h// IOS笔记 /*Cocoapods安装步骤 1.升级Ruby环境 终端输入:$gem update --system 此时会出现 ERROR: While ex ...