mouseover和mouseout事件的相关元素
在发生mouseover和mouseout事件时，还会涉及更多的元素，这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。对mouseover事件而言，事件的主目标获得光标元素，而相关元素就是那个失去贯标的元素。
例如：
对mouseout而言，事件的主目标是失去光标的元素，而相关的元素则是获得光标的元素
<body>
<div style='widtyh:200px;height:200px;background:blue'></div>
</body>
如果指针一开始位于这个div上，然后这就在div上触发mouseout，相关元素就是body元素，与此同时，body元素上面就会触发mouserover事件，而相关元素变成了div
DOM通过event对象的relatedTarget属性提供相关的元素的信息，这个属性只对mouseover和mouseout事件才包含值，其他事件值为null
非标准兼容版本：
var EventUtil = {
addHandler: function(element,type,handler){//添加事件
if (element.addEventListener)
{
element.addEventListener(type,handler,false);
}else if (element.attachEvent)
{
element.attachEvent('on'+type,handler);
}else {
element['on'+type] = handler;
}
},
getEvent: function(event){//获得事件对象
return event || window.event;
},
getTarget: function(event){//获得事件元素
return event.target || event.srcElement;
},
preventDefault: function(){//取消默认事件行为
if (event.preventDefault)
{
event.preventDefault();
}else {
event.returnValue = false;
}
},
removeHandler: function(element,type,handler){//取消事件
if (element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}else if (element.dettchEvent)
{
element.dettchEvent('on'+type,handler);
}else {
element['on'+type] = null;
}
},
stopPropagation: function(event){//取消冒泡机制
if (event.stopPropagation)
{
event.stopPropagation();
}else {
event.cancleBubble = true;
}
},
getRelatedTarget: function(event){
if (event.relatedTarget)
{
return event.relatedTarget;//标准下返回相关元素
}else if (event.toElement)
{
return event.toElement;//mouseout事件触发，保存相关元素
}else if (event.fromElement)
{
return event.fromElement;//mouseover事件触发，保存相关元素
}
}
}
实例：
var oDiv = document.getElementById('div1');
var oSpan = document.getElementById('span1');
EventUtil.addHandler(oDiv,'mouseout',function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
console.log('鼠标从'+target.tagName+'到'+relatedTarget.tagName);
});
mouseover和mouseout事件的相关元素的更多相关文章
- mouseover和mouseout事件引发的BUG-解决方法
mouseover和mouseout引发的BUG原由 当给一个元素添加mouseover或mouseout事件,这个元素还有子元素. 由于子元素的事件冒泡,鼠标移入或移出子元素都会触发事件. 解决的方 ...
- mouseover和mouseout事件在鼠标经过子元素时也会触发
JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquer ...
- mouseover 和 mouseout 事件是可以冒泡的 取消
mouseover 和 mouseout 事件是可以冒泡的,子元素上触发的事件会冒泡到父元素上.可以改用 mouseleave 和 mouseenter 事件,这两个事件不冒泡.
- 鼠标 mouseover和mouseout事件
在div内想实现鼠标移入移出效果,最开始的时候是用了jquery的mouseout和mouseover事件来实现的, $('.product).mouseover(function(){ …… }). ...
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
- mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）
在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...
- relatedTarget、fromElement、toElement相关元素
在发生mouseover和mouseout事件时,还会涉及更多的元素.这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内.对mouseover事件而言,事件的主目标是获得光标的元素 ...
- js当中mouseover和mouseout多次触发(非冒泡)
JS当中,mouseover和mouseout多次触发事件,不光是冒泡会产生,就是不冒泡,在一定条件下 ,也会产生多次触发事件: 例如下面的结构的情况下,我在class="ceng_up f ...
- mouseover、mouseout，mouseenter、mouseleave区别
心情压抑的一天,我想好好的. mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseen ...
随机推荐
- TLS1.1升级到TLS1.2（微信小程序要求TLS1.2以上）
检测是否具有TLS1.2:www.ssllabs.com 实验过的办法: https://www.cnblogs.com/wqcheng/p/6618070.html http://www.ocbc. ...
- 更改AVD默认路径
默认情况下,安卓模拟器镜像文件会放到%userprofile%\.android下,例如当前Win7登录用户为administrator 则%userprofile%为 c:\users\admini ...
- Soa思想分布式服务webservice WCF
什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成,这 ...
- Android开发之使用SwipeRefreshLayout完成下拉刷新
SwipeRefreshLayout是V4包下的一个组件,老版本的V4包不支持这个组件功能.因此,如果发现自己的项目中无法导入SwipeRefreshLayout的包,那么说明项目中的V4包是老版本的 ...
- JAVA 8.20 游戏：四子连（Java&C++）
(游戏:四子连 )四子连是一个两个人玩的棋盘游戏,在游戏中,玩家轮流将有颜色的棋子放在一个六行七列的垂直悬挂的网格中: 这个游戏的目的是在对手实现一行.一列或者一条对角线上有四个相同颜 ...
- javascript 高级程序设计 三
Sorry,前两张介绍的主题还是JavaScript,而第一章介绍了JavaScript和ECMAScript区别,所以前两章介绍的主题应该改为ECMAScript,但是 标题就不改了因为现在人们习惯 ...
- BZOJ 1791: [IOI2008]Island 岛屿 - 基环树
传送门 题解 题意 = 找出无向基环树森林的每颗基环树的直径. 我们首先需要找到每颗基环树的环, 但是因为是无向图,用tarjan找环, 加个手工栈, 我也是看了dalao的博客才知道tarjan找无 ...
- UI设计工资有多高？怎么快速拿高薪？
1.UI设计工资有多高? 有人不服UI设计待遇薪资高,那么下面就来看下一线城市的最新UI设计平均薪资待遇,大家也可以打开各招聘网站查询各行业平均薪资情况,一个行业的薪资高不高行业市场决定. 待遇较高说 ...
- Maximum Average Subarray I LT643
Given an array consisting of n integers, find the contiguous subarray of given length k that has the ...
- 基于tomcat的solr环境搭建（Linux）
♥♥ solr是基于lucene的一个全文检索服务器,提供了一些类似webservice的API接口,用户可以通过http请求solr服务器,进行索引的建立和索引的搜索.索引建立的过程:用户提交的文 ...