文档章节

JS中子元素的oumouseover触发父元素onmouseout -很像继承

源子姗
 源子姗
发布于 2017/03/10 11:27
字数 673
阅读 81
收藏 6

1、什么叫事件对象?

  • 可以获取事件对象的一系列属性,在事件中写一个参数,即可通过参数获取。代码如下(wrap是一个对象):
wrap.onmouseover = function(e) {
 e = window.event || e;        // window.event是为了兼容ie下获取事件对象,而e为标准浏览器直接获取
 }

2、事件对象的相关对象

在触发onmouseover及onmouseout时,必定会涉及到其它对象,如:onmouseover的相关对象,即为哪个对象进入的。onmouseout的相关对象即为进入到哪个对象。获取方法如下(wrap是一个对象):

wrap.onmouseover = function(e) {
     e = window.event || e;
     var s = e.fromElement || e.relatedTarget;    //e.fromElement为IE下onmouseover获取相关对象方法,relatedTarget为标准浏览器下获取方法
 }
 wrap.onmouseout = function(e) {
     e = window.event || e;
     var s = e.toElement || e.relatedTarget;        //e.toElementIE下onmouseout获取相关对象方法,relatedTarget为标准浏览器下获取方法
 }

3、判断一个元素是否包含另一个元素

IE下可以使用a.contains(b)判断a是否包含b

标准浏览器下a.compareDocumentPosition(b)有5个值,若为0表示为同一节点,若为2表示a位于b后面,若为4表示a位于b前面,若为10表示a为b的后代,若为20表示a为b的祖级。

兼容写法:

function contains (a,b) {
    if (a.contains(b)) {
        a.contains(b);
    }else{
        a.compareDocumentPosition(b);
    }
}

当触发onmouseover时,可能是从对象以外移入的,也有可能是父级移入到子级,以及子级移出到父级,刚才也说过,onmouseover的相关对象是获取从哪个对象进入的。如果是从外面的对象进入的,我们就执行所需的代码。如果是从父级移入到子级或是由子级移出到父级时,则直接跳过。

wrap.onmouseover = function(e) {
     e = window.event || e;
     var s = e.fromElement || e.relatedTarget;
     if (document.all) {    //判断浏览器是否为IE,如果存在document.all则为IE
         if (!this.contains(s)) {    // 判断调用onmouseover的对象(this)是否包含自身或子级,如果包含,则不执行
             console.log('IE will over');
        }    
     } else {    //标准浏览器下的方法
         var reg = this.compareDocumentPosition(s);
         if (!(reg == 20 || reg == 0)) {
             console.log('Browser will over');
         }
     }
 }

当触发onmouseout时,可能是从父级移到子级,也可能由子级移到父级,或是移出至父级之外。

父级称到子级,则相关对象为子级,子级称到父级,则相关对象为父级。

代码如下:

wrap.onmouseout = function(e) {
     e = window.event || e;
     var s = e.toElement || e.relatedTarget;
     if(document.all) {
         if (!this.contains(s)) {
             console.log('IE will out');
        }
     } else {
         var reg = this.compareDocumentPosition(s);
         if (!(reg == 20 || reg == 0)) {
             console.log('Browser will out');
         }
     }
 }

问题得到了解决。

以上有什么不懂的可以给我发消息,我会第一时间回复的!

© 著作权归作者所有

共有 人打赏支持
源子姗
粉丝 62
博文 10
码字总数 22380
作品 0
浦东
程序员
私信 提问
加载中

评论(1)

l
liang-yongtong
不错哟
safair 中使用-webkit-overflow-scrolling: touch无法滚动

描述 -webkit-overflow-scrolling: touch; 的父元素中子元素超过父元素大小无法滚动。 方法一 iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理 深入研究-webkit-overflow-sc...

weineeL
2018/07/04
0
0
前端面试之JavaScript

1. JS基本的数据类型和引用类型 基本数据类型:number、string、null、undefined、boolean、symbol -- 栈 引用数据类型:object、array、function -- 堆 两种数据类型存储位置不同 原始数据类...

大灰狼的小绵羊哥哥
2018/08/27
0
0
JavaScript零基础入门——(十三)JavaScript的事件

JavaScript零基础入门——(十三)JavaScript的事件 大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了...

JandenMa
2018/07/01
0
0
Bootstrap JS插件使用实例(6)-折叠(手风琴效果)

本篇文章讨论Bootstrap的js插件的折叠效果(bootstrap-collapse.js),即控制页面某一区域内容的显示和隐藏。通过将多个这样的折叠元素组合起来,我们就可以实现诸如手风琴或是导航栏这样的复杂...

doliangzhe
2013/05/19
0
2
Angular控制器之间的通信

控制器之间的通信 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之...

Mr_Tank_
2014/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IOS  学习记录

1.StackView=>IOS 9及以上支持 2.布局方式: AutoLayout / StackView 堆布局 (线性布局) 3.屏幕适配 (资源分辨率、设计分辨率、屏幕分辨率) Size Class技术 可以针对 屏幕的方向进行设置...

萨x姆
48分钟前
3
0
第四次工业革命:自主经济的崛起

https://36kr.com/p/5170370.html

shengjuntu
昨天
3
0
Cloud Native 与12-Factor

12-Factor(twelve-factor),也称为“十二要素”,是一套流行的应用程序开发原则。Cloud Native架构中使用12-Factor作为设计准则。 12-Factor 的目标在于: 使用标准化流程自动配置,从而使...

waylau
昨天
9
0
java多线程2

“非线程安全”问题存在于“实例变量”中,如果是方法内部的私有变量,则不存在线程安全问题。这是因为方法内部的变量都是私有造成的。 synchronized 获取的都是对象锁。如果多个线程访问多个...

一滴水穿石
昨天
4
0
今天的学习

1,document.location.href:获取整个url 2,str.split(' '):用字符分割字符串 3,$this->load->library(' '):引用图像处理类 4,$this->load->library(' '):引用Email类 5,特殊访问指针$th......

墨冥
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部