鼠标移至div内部其他层时,触发mouseout
话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点。
为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout事件,测试时就会发现如下的状况:
当鼠标移入DIV内部时,onmouseover事件被触发;接着再鼠标移动到DIV内部的IMG或者SPAN元素之上,我们肯定不会认为这时鼠标已经移到了DIV的外边,但奇怪的是onmouseout事件触发了,而且紧接着onmouseover事件也马上被触发了。
这可不是我想要的,那么怎么来"屏蔽"内部元素给外层元素带来的Javascript事件干扰呢?
这里列举两种方法:
一. setTimeout
因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后,外层元素的onmouseover也会马上触发,所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行,然后在onmouseover事件中再执行clearTimeout方法,这样就可以避免内部元素引起的事件干扰。
具体的执行过程请看下图(纵向的虚线表示时间):
这是个很巧妙的的方法,因为当onmouseout触发后,实质性的方法并没有马上执行,而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件,那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了,所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。
二.contains
在onmouseover时先进行如下判断,结果为true时再执行方法体:
$("#popFormDiv").mouseover(function () {
var s = event.fromElement || event.relatedTarget;
if (!this.contains(s)) { $(this).show("slow"); }
});
在onmouseout时先进行如下判断,结果为true时再执行方法体:
$("#popFormDiv").mouseout(function () {
var s = event.toElement || event.relatedTarget;
if (!this.contains(s)) { $(this).hide("slow"); }
});
下面来解释一下上面两行代码的含义:
在IE中,所有的HTML元素都有一个contains方法,它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发,如果内部元素导致了不需要的事件被触发,那我们就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素;event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是:
○ 当触发onmouseover事件时,判断鼠标离开的元素是否是当前元素的内部元素,如果是,忽略此事件;
○ 当触发onmouseout事件时,判断鼠标进入的元素是否是当前元素的内部元素,如果是,忽略此事件;
这样,内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了,非IE的浏览器并不支持contains函数,不过既然我们已经知道了contains函数的作用,就可以自行添加如下的代码来为非IE浏览器增加contains支持:
if (typeof (HTMLElement) != "undefined") {
HTMLElement.prototype.contains = function (obj) {
while (obj != null && typeof (obj.tagName) != "undefined") {
if (obj == this)
return true;
obj = obj.parentNode;
}
return false;
};
}
上面不的方法不兼容火狐:
重点是jQuery:
jQuery中可以使用mouseleave来代替mouseout,这样就不会发生上面所说的事情了。
还有就是,mouseover会不断的被反复触发,用mouseenter代替就好了。
完美解决~
转自:http://www.verydemo.com/demo_c110_i6533.html
鼠标移至div内部其他层时,触发mouseout的更多相关文章
- 只要把鼠标移上Div方框,方框就自动顺时针旋转
这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...
- 实现点击后创建div,若对div2秒无操作则将div隐藏,鼠标移上div让它不隐藏,移出div超过两秒则div隐藏
$('.addLabel').on('click', function () { setTimeout(function(){ if(hoverflag==0){ $(".labelHide ...
- Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件
请注意!!!!! 该插件demo PHP 的 demo下载 C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...
- 转:纯CSS实现“鼠标移过显示层”效果
利用<a>标签的a:hover状态触发鼠标移过的动作,其中未触发状态显示为单个图片.兼容IE6/7/8以及FF/Chrome等主流浏览器.以下是图示及完整代码. 原文:http://www ...
- 超出div宽度范围的文字进行省略号省略,在鼠标移上去以后显示完整的内容
一.前言 当我们在固定的范围内显示内容时,我们是希望能够完整显示的,然而往往事与愿违,文本会超出我们给定的范围,这时候怎么办呢? 二.超出范围,对文本进行省略号隐藏 先上图 代码很简单 div{ wi ...
- Jquery实现鼠标移到某个对象,弹出显示层。
/** * 鼠标移上去显示层 * @param divId 显示的层ID * @returns */ $.fn.myHoverTip = function(divId) { var div = $(& ...
- DIV内容超出长度显示省略号,鼠标移上自动显示全部内容(EasyUI DataGrid)
如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...
- 利用自定义动画 animate() 方法,实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠标移开时,继续滚动
查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...
- 鼠标划过用户名时在鼠标右下角显示div展示用户资料
最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...
随机推荐
- [Node.js]28. Level 5: Express Server
Now let's create an express server which queries out for this search term and just returns the json. ...
- 2015 -> 2016
2015年. 2015年前几个月,一直住在三亚,每天过着老年人般的生活. 每天吃饭睡觉看电视遛弯游泳.生活倒也满意. 4月份開始,从三亚一路开车回到上海,开开停停,最后享受了一次沿路的风景和满意. 5 ...
- 将War发布到Tomcat7上遇到的问题及其解决
用MyEclipse做了一个app,在其自带的Tomcat里运行正常,做成war后却出现如下错误: [ServletException in:/page/jsp/template/block.jsp] ...
- 新浪微博SSO登陆机制(转载)
原文地址: http://www.cnblogs.com/AloneSword/p/3840548.html 最近在使用sina微博时,经常性交替使用 weibo.com 和 t.sina.cm.cn ...
- Asp.Net 之 前台绑定常用总结
1.<%= 变量名 %> 里面放的是后台定义的变量名,如: <div> <p> <%= DateTime.Now.ToString() %></p ...
- 使用curl在命令行中下载文件
http://m.blog.csdn.net/blog/mayadong7349/7019208 使用curl在命令行中下载文件 linux下curl简单应用详解 http://blog.sina.c ...
- android 实现qq聊天对话界面效果
效果图: chatting_item_from.xml <?xml version="1.0" encoding="UTF-8"?><Line ...
- OpenCV图像处理篇之阈值操作函数
阈值操作类型 这5种阈值操作类型保留opencv tutorials中的英文名称.依次为: Threshold Binary:即二值化,将大于阈值的灰度值设为最大灰度值.小于阈值的值设为0. Thre ...
- Linux rpm 命令参数使用详解[介绍和应用]
RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种 ...
- yml在线格式转换工具(properties)
分享一个在线properties 转 yml工具,也支持yml转properties, 域名非常简单好记,直接在地址栏里输入toyaml.com,地址:http://toyaml.com/ yml,即 ...