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 ...
随机推荐
- django的csrf
csrf:跨站请求网站 如果是ajax提交,可以按照下面的方式处理 <script src="/static/jq/jquery-3.3.1.js"></scri ...
- cpio解压initramfs.img
一.解压initramfs.img # mkdir test # cp /boot/initramfs.img /test # cd test # file initramfs.img initram ...
- php解析优酷网上的视频资源去广告
1.过程原理解析: 一.准备工作 所谓工欲善其事必先利其器,做好破解的准备工作会令你事半功倍. 1.首先准备一个Http抓包工具,PC上推荐Fiddler或者Postman,iOS上推荐Surge 2 ...
- Python 安装pyautogui
在Python中使用PyAutoGui模拟键盘和鼠标操作 一.系统环境 操作系统:win10 64位 Python版本:Python 3.7.0 二.安装参考 1.使用pip进行安装,pip inst ...
- vue-router2
六,导航钩子 导航钩子函数主要是在导航跳转的时候做一些操作,比如跳转页面之前,进行判断 进而选择跳转到哪里 钩子函数根据生效范围根据其生效范围可以分为全局钩子函数,路由独享钩子函数 和 组件钩子函数. ...
- XSS 攻击的防御
xss攻击预防,网上有很多介绍,发现很多都是只能预防GET方式请求的xss攻击,并不能预防POST方式的xss攻击.主要是由于POST方式的参数只能用流的方式读取,且只能读取一次,经过多次尝试,自己总 ...
- day7 回顾
1,is == == 比较的是值. is 内存地址.对于int str 来说:存在小数据池的概念.为什么存在小数据池? 节省内存. int -5 ~ 256 str 全部字母,数字与单个字母想乘 数字 ...
- Vue 初始化多个Vue 及之间的相互修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Linux_(4)Shell编程(下)
五.shell流程控制1.一重分支if 语句语法格式:if condition then command1 fi末尾的fi就是if倒过来. 写成一行: if condition; then comma ...
- iOS push新的调用方法
// IOS8 新系统需要使用新的代码if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0){ [[UIAppl ...