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 ...
随机推荐
- 2017-2018-2 20165315 实验三《敏捷开发与XP实践》实验报告
2017-2018-2 20165315 实验三<敏捷开发与XP实践>实验报告 一.编码标准 编写代码一个重要的认识是"程序大多时候是给人看的",编程标准使代码更容易阅 ...
- linux命令学习之：ps
Linux中的ps命令是Process Status的缩写.ps命令用于报告当前系统的进程状态,列出系统中当前运行的那些进程.可以搭配kill指令随时中断.删除不必要的程序. 要对进程进行监测和控制, ...
- python collections 里面的Counter 统计所有出现的字符数量
from collections import Counter c_num = Counter('Hello world') # 统计出现的每个字符数量print(c_num) for key, va ...
- 基于kafka-net实现的可以长链接的消息生产者
今天有点时间,我就来说两句.最近接触的Kafka相关的东西要多一些,其实以前也接触过,但是在项目使用中的经验不是很多.最近公司的项目里面使用了Kafka消息中间件,由于以前的人员编写的客户端的类不是很 ...
- opencv 3.2 vs2015 debug assertion __acrt_first_block == header
网上复制了一个转直方图的代码 ,说来也奇怪, 用imshow 显示 图片在独立窗体内,不存在问题, 要注释掉这段代码就出现了下边的错误. 网上查了查,原来是程序中 有个std::vector<c ...
- mybatis入门--初识mybatis
初识mybatis 今天,一起来说说mybits这个框架吧.这是一个持久层的框架.之前叫做ibatis.所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子的. ...
- Activity和Intent
- sql重复数据的过滤问题
有重复数据主要有一下几种情况: 1.存在两条完全相同的纪录 这是最简单的一种情况,用关键字distinct就可以去掉 example: select distinct * from table(表名) ...
- BZOJ 3123 [SDOI2013] 森林 - 启发式合并 主席树
Description 给你一片森林, 支持两个操作: 查询$x$到$y$的$K$大值, 连接两棵树中的两个点 Solution 对每个节点$x$动态开权值线段树, 表示从$x$到根节点路径上权值出 ...
- postfix 设置邮件头翻译，本域邮件不进行邮件头翻译，仅发送至外网的进行邮件头翻译？
postfix 设置邮件头翻译,本域邮件不进行邮件头翻译,仅发送至外网的进行邮件头翻译? 现在设置的 smtp_generic_maps = hash:/etc/postfix/generic sen ...