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 ...
随机推荐
- Windows如何安装Android SDK
我们都知道App测试分为Android和IOS两种客户端,当我们测试Android版本的App的时候经常要安装Android环境,那么安装Android SDK 就是必不可少的,接下来我们就来看看如何 ...
- 客户端无法重新使用 SPID 为 63 的会话，该会话已被重置用于连接
客户端无法重新使用 SPID 为 %d 的会话,该会话已被重置用于连接池.失败 ID 为 %d. 此错误可能是由于先前的操作失败引起的.请查看错误日志,找出在显示此错误消息之前刚发生的失败操作. 20 ...
- java_5.1 for循环
1.求1-100的和 public static void main(String[] args) { int sum = 0; for (int i = 0; i <= 100 ; i++) ...
- 4-java 格式化输出
java保留两位小数4种方法 import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberF ...
- es数组去重的简写
console.log([...new Set([2, 2, 12, 1, 2, 1, 6, 12, 13, 6])])
- mysql事务四大特性
本篇讲诉数据库中事务的四大特性(ACID)和简单操作 ⑴ 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,这和前面两篇博客介绍事务的功能是一样的概念,因此事务 ...
- python 面向对象编程 之 单例模式
单例模式三种实现方式: 单例模式:单例模式是解决系统资源浪费的一种方案,是指一个类实例化后可以多次使用此对象. 单例模式应用场景:数据库操作.日志.后台打印 # settings.py# Host=' ...
- Tomcat假死的原因及解决方案
服务器配置:linux+tomcat 现象:Linux服务器没有崩,有浏览器中访问页面,出现无法访问的情况,没有报4xx或5xx错误(假死),并且重启tomcat后,恢复正常. 原因:tomcat默认 ...
- 码代码的小女孩（来自noip贴吧）
天冷极了,下着雪,又快黑了.这是NOIP的前夜.在这又冷又黑的晚上,一个衣衫破烂的小女孩在机房敲着代码.她从班里逃出来的时候还拿着一本算导,但是有什么用呢?那是一本很破旧的书--那么大,一向是她妈妈垫 ...
- 多维数组sorted函数的用法
对某一个位置排列 l=[[1,5,7,9],[5,10,6,11],[4,2,1,4]] newlist=sorted(l,key=lambda iterm : iterm[0],reverse=Tr ...