文章导航

event.relatedTarget

2018-11-8 12:04| 作者: admin| 查看: 33| 评论: 0|来自: 蚂蚁部落

假设A国与B国相邻,中间有一条边境线。

当某人从A国跨过国境线进入B国,那么两个国家就产生了关联。

不同角度可以有不同的理解,例如以下两种阐述:

(1).以A国角度看,此人进入B国。

(2).以B国角度看,此人来自A国。

对于JavaScript中的有些事件涉及的元素,也有类似的关系。

而事件对象的relatedTarget属性就是用来相关联的元素,分析如下:

(1).如果是mouseover事件,B元素注册mouseover事件处理函数,鼠标指针从A元素移入B元素,事件触发,那么从B元素角度来看,鼠标指针来自于A元素,那么relatedTarget属性返回A元素。

(2).如果是mouseout事件,B元素注册mouseout事件处理函数,鼠标指针从B元素移入A元素,事件触发,那么从B元素角度来看,鼠标指针进入A元素,那么relatedTarget属性返回A元素。

特别说明:

(1).都是以注册事件处理函数的元素为角度看。

(2).此属性仅对mouseover事件和mouseout事件有效。

语法结构:

[JavaScript] 纯文本查看 复制代码
event.relatedTarget

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<style type="text/css"> 
#box{
  width:150px;
  height:150px;
  background-color:blue;
}
#ant{
  width:80px;
  height:50px;
  background-color:red;
}
</style> 
<script> 
window.onload=function(){ 
  let ant=document.getElementById("ant"); 
  ant.onmouseover=function(ev){ 
    this.innerHTML=ev.relatedTarget.id;
  } 
} 
</script> 
</head> 
<body> 
<div id="box"> 
  <div id="ant"></div> 
</div> 
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/120605pnvi5nd55cnk7laj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).为子元素注册mouseover事件处理函数。

(2).当鼠标从父元素移入子元素的时候,那么从子元素的视角看,父元素与其产生关联。

(3).那么,relatedTarget的返回值是父元素对象。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
<style type="text/css"> 
#box{
  width:150px;
  height:150px;
  background-color:blue;
}
#ant{
  width:80px;
  height:50px;
  background-color:red;
}
</style> 
<script> 
window.onload=function(){ 
  let ant=document.getElementById("ant"); 
  ant.onmouseout=function(ev){ 
    this.innerHTML=ev.relatedTarget.id;
  } 
} 
</script> 
</head> 
<body> 
<div id="box"> 
  <div id="ant"></div> 
</div> 
</body> 
</html>

对于mouseout事件也是相同的道理。

以注册事件处理函数的子元素视角来看,鼠标指针移入了它的父元素。

很自然relatedTarget属性的返回值是父元素对象。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部