onmouseover和onmouseout的那些事

这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onmouseenter()和onmouseleave().后来自己看博客加上自己的练习终于搞明白了这两组的区别.ommouseover()和onmouseout()表示鼠标移入和移出时触发.onmouseenter()和onmouseleave()表示的是鼠标穿过和穿出的时候触发.是不是还不太明白..那…

关于onmouseover和onmouseout的bug

总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容</div> </div> 简单写了一下样式,效果如下: js代码如下: var oBox = document.getElementById("box"); oBox.onmouseover = function(){ alert("移入"); }…

JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系

hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个函数. 注意:会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误). 参数 …

onmouseover和onmouseout的烦恼

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout. 非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进时才触发,onmouseout也不会仅仅在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout. 在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发…

使用HTML DOM 来分配事件 —— onmouseover和onmouseout ，onmousedown和onmouseup

一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在上面前移到上面后 (1)关键代码<body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px…

JS:onmouseover 、onmouseout

鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px solid blue; cursor: hand; </style> <script type="text/javascript"> function over() { var p = document.getElementById("p");…

【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】

1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById("demo").value;//取值if(x=="") throw "值为空"; //返回错误提示if(isNaN(x)) throw "不是数字";if(x>10) throw &q…

Repeater控件添加onmouseover和onmouseout事件

网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控件中应用>http://www.cnblogs.com/insus/archive/2011/06/25/2090071.html 没有过多久,他又说,情况有些不同.就是html的格式不能添加任何代码了.大约如下: 因此,参考那个例子,根本无法解决问题.Insus.NET尝试了,在OnItemCreat…

onmouseover和onmouseout的bug

脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmouseout的bug问题,不过对于我等脑子不好用的,还是几个无bug的问题吧,看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #div1{ width:…

HTML事件(onclick、onmouseover、onmouseout、this)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法

鼠标移入移出图片切换很常见的,那我们就来说说他的写法第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/dongtai.png" onmouseover="this.src='img/HBuilder.png'" onmouseout="this.src='img/dongtai.png'"/> 先默认一张图片,然后在写图片移入移出的图片第二种方法,js替换…

JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别

疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所以也写了一下自己的理解,略做分享和学习. 首先我们都知道onmouseover和onmouseenter都属于鼠标进入的状态,onmouseout和onmouseleave都是鼠标移开的状态,那么我们来看看主要区别. 一般来说,onmouseover.onmouseout一起使用,鼠标经过时自身触发…

使用CSS如何悬停背景颜色变色 onmouseover、onmouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

js onmouseover与onmouseout用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="关键字,关键词"> <meta name="Description" content="描述和简介"> <title>Ti…

第8天：javascriptDOM小案例、onmouseover 、onmouseout

案例为元素注册点击事件,弹出对话框 <input type="button" id="btn" value="开发分离"> <input type="button" id="btn2" value="最终版"> <script> //定义函数 function f1(){ alert("开发分离的html和js代码"); } //…

Js onmouseover和onmouseout小特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" conte…

利用onMouseOver和onMouseOut实现图像翻滚

代码: <img src="images/001.jpg" alt="pic" onmouseover="this.src='images/001.jpg';" onmouseout="this.src='images/002.jpg';"/>…

jquery解决onmouseover和onmouseout合用的bug问题

经常会遇到鼠标放到一个元素上显示另外一个元素,这两个元素是父子关系,比如在A上绑定mouseover和mouseout事件来显示或隐藏B元素,A元素包含B元素,当鼠标移到B元素后浏览器认为你移开了A,所以就隐藏了B,下边这段代码解决这个问题, var price_tip_pop = null; $('div.v-price-tips').mouseout(function(){ clearTimeout(price_tip_pop); price_tip_pop=setTimeout(funct…

onmouseover和onmouseout在GridView中应用 Ver2

第一个版本,可以参考:http://www.cnblogs.com/insus/archive/2009/03/13/1411057.html 以前的版本,是在Gridview的OnRowCreated事件进行写代码.现今此版本,是使用Override Render方法进行, 能写更少与简洁的代码,在你的网站上,创建一个网页.aspx,在网页中拉一个GridView控件: 演示中,从数据库取出数据,绑定在刚才的GridView控件上: 现在,我们可以写Render方法了,先定义好两个变量,一个m…

解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部移动时会触发onMouseOut事件,信息栏放在div中,内部有table.img.a等元素,看来是由于事件冒泡,子元素上触发了事件冒泡到了父元素,导致滑动时不断闪动,头晕眼花,于是着手解决问题. 方法一: 在IE下解决问题很简单,用onMouseEnter.onMouseLeave来代替onMou…

Vue中 onmouseenter,onmouseleave,onmouseover,onmouseout的区别

今天在学Vue视频的时候,提到了这四个触发事件,我就想做下笔记: 1.onmouseenter和onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发下图中,onmouseenter和onmouseleave相当于绑定的区域为A+B 2.onmouseover和onmouseout是一组:当鼠标进入指定区域的时候触发,进入或者离开子组件也都触发下图中,onmouseover和onmouseout相当于绑定的区域为A(不包含B)…

onmouseenter,onmouseleave,onmouseover,onmouseout的区别

首先,这四个事件两两配对使用,onmouseenter.onmouseleave一对,onmouseover.onmouseout一对,不能混合使用. onmouseenter 和 onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子元素时都不触发(父亲的东西就是父亲的,不归儿子所有).如图: onmouseover和onmouseout是一组:当鼠标进入指定区域的时候触发,支持冒泡,进入或者离开子元素都会触发(父亲有的东西,儿子也有).如图:…

父元素onmouseover触发事件在父子元素间移动不停触发的问题

今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center} .container{height: 347px…

JS子元素oumouseover触发父元素onmouseout

原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父级的onmouseout后又触发onmouseover:从子级移入父级后再次触发父级的oumouseout后又触发onmouseover.而如果onmouseover内又应用了计时器便会存在较大的问题.下面针对此问题给出解决方案. 首先,在给出解决方案之前,必须先弄清楚几个对象及方法,分别如下: 1…

onmouseover与onmouseenter区别

1.onmouseover.onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件:(父亲有的东西,儿子也有) ,支持冒泡 2.onmouseenter.onmouseleave:鼠标经过时自身触发事件,经过其子元素时不触发该事件.(父亲的东西就是父亲的,不归儿子所有) ,不支持冒泡…

event.srcElement ，event.fromElement，event.toElement

自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event.event.srcElemtn.event.fromElement.event.toElement 就行了.在 FireFox 中获得触发事件的元素可以用 event.target,但其他两个 fromElement 和 toElement 就要费些周折. 1.event.srcElement :当前事件的源 var obj = event.srcElement ? event.srcElemen…

JavaScipt 事件体系

事件机制 jQuery对事件的绑定分别有几个API .bind()/.live()/.delegate()/.on() 不管是用什么方式绑定,归根到底还是用addEventListener/attachEvent处理的,正如选择器一样不管如何匹配最终还是那么几个浏览器接口处理,既然如此,事件为什么还要区分那么多不同的处理方案? 这里就要涉及到 DOM 事件处理模型了,就是常提到的捕获与冒泡,传统的事件处理给某一元素绑定了一个点击事件,传入一个回调句柄处理. element.addEventLis…

【译】采用MVC模式创建一个简单的javascript App

原文标题:Build A Simple Javascript App The MVC Way 作者:joshcrawmer4 翻译人:huansky 初次翻译,翻译的不好,还请见谅 JavaScript中最好的一部分之一,也可能是最糟糕的. 在HTML文档的头部添加一个开始和结束脚本标记,并在其中引入一些意大利面条式的代码,毫无疑问这是一种过分简单化的能力. 瞧! 有用! 真的吗? 你问什么是意大利面条式的代码? 意大利面条式的代码是一个直白的术语,指的是那些代码凌乱,控制结构复杂,并且这种代码…

15天学会jquery

第二章 15 Days of jQuery 比window.onload 更快一些的载入 window.onload()是传统javascript 里一个能吃苦耐劳的家伙.它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径. 但有时候等待页面载入还是不够快. 只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使 window.onload()载入的很慢.所以当我为最近的网络营销创建一个web 应用程序的时候我不得希望更快一点.有一些围绕window.onload()…

基于Web的企业网和互联网的信息和应用（ 1194.22 ）

基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194.22.htm 这些标准的规范由美国政府提出的制作网页必须遵循的要求.除非这样做会增加过分的负担,否则必须适用这些规定. 符合规范的关键就是严格遵守这些条文.许多机构购买了辅助软件去测试他们的网页.这将有助于人们更加了解这些工具和不同的编码技术之间是如何互相影响的.然而,我们应该始终小心这些辅助科…

【onmouseover和onmouseout的那些事】的更多相关文章