javascript父级鼠标移入移出事件中的子集影响父级的处理方法

一、我们先分析其产生的原因:

1、当鼠标从父级移入子集时触发了父级的两个事件:a、父级的mouseout事件(父级离开到子集);b、由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级);

2、当鼠标从子集移出到父级时又触发了父级的两个事件:a、由于事件冒泡影响,父级触发了mouseout事件(父级移出父级);b、再触发了父级的mouseover事件(子集移入父级)

注:红色字体的解释是事件冒泡的奇妙之处。

二、解决方法:

首先必须先熟悉以下两个方法和一个事件属性:

a,b为节点

1、a.contains(b)

如果a包含b,返回true;否则返回false;a包含a同样返回true(不兼容火狐)

2、 a.compareDocumentPosition(b) 兼容火狐

这玩意就好玩了:

a在b之后返回2;

a在b之前返回4;

a被b包含返回8;

a包含b返回16;

a包含a返回0;

3、ev.relatedTarget

返回事件的目标节点相关的节点;

对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。

对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。(IE9以下不兼容)

但IE7/8下有ev.toElement和ev.fromElement;

mouseover事件对应ev.fromElement

mouseout事件对应ev.toElement

接下来开始解决问题:

假设a是父级;b是与事件关联的节点:

解决原因1:

方法(1)a包含b返回true,a包含a返回true;

方法(2)a移出b(mouseout)返回4+16即返回20;a移入a(mouseover)返回0;

解决原因2:

方法(1)a包含a返回true,a包含b返回true

方法(2)a移出a返回0,b移入a返回4+16即返回20;

要让以上都不执行:

见代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>解决子集影响父级事件</title>
    <style type="text/css">
    body  { width: 100%; height: 100%; padding: 0; margin: 0;}
    #div1 { width: 200px; height: 200px; background: red; }
    #div2 { width: 100px; height: 100px; background: blue;position: absolute; top: 50px; left: 50px;}
    #txt { width: 800px; background: lime; color: red; height: 50px; line-height: 50px; font-size: 30px}
    </style>
    <script>
    window.onload=function(){

        var oTxt = document.getElementById(‘txt‘);
        var a = document.getElementById(‘div1‘);
        var b = document.getElementById(‘div2‘);

        alert(b)
        a.onmouseover=function(ev){
            var oEvent = ev || window.event;

            if(toAffect(a,oEvent,‘mouseover‘)){
                oTxt.value += "移入"+" ";
            }

        }
        a.onmouseout=function(ev){
            var oEvent = ev || window.event;
            if(toAffect(a,oEvent,‘mouseout‘)){
                oTxt.value += "移出"+" ";
            }

        }
    }

    function toAffect(obj1,ev,event){
        var obj2 = null;
        if(ev.relatedTarget){
            obj2 = ev.relatedTarget;
        }
        else{
            if(event == ‘mouseover‘){
                obj2 = ev.fromElement;
            }
            else if(event == ‘mouseout‘){
                obj2 = ev.toElement;
            }
        }
        if(obj1.contains){
            return !obj1.contains(obj2);
        }
        else{
            return !!(obj1.compareDocumentPosition(obj2)-20)&&a!=b;
        }
    }
    </script>
</head>
<body>
    <div id="div1">
        父级
        <div id="div2">子集</div>
    </div>
    <input id="txt" type="text" />
</body>
</html>

代码中的toAffect方法便是解决子集影响父级的方法。

时间: 2024-10-12 17:34:22

javascript父级鼠标移入移出事件中的子集影响父级的处理方法的相关文章

清除子元素继承父元素鼠标移入移出事件

function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { return !!(parentNode.compareDocumentPosition(childNode) & 16); } } function checkHover(e,target){

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

认清鼠标移入移出事件

本文也同步发表在我的公众号"我的天空" 鼠标的移入移出事件,是在我们做一些前端效果时使用相当频繁的事件,但在JS中,鼠标的移入移出事件有两对,分别是mouseover.mouseout:以及mouseenter.mouseleave,如果没有对其的区别有清新的认识话,则很容易掉坑里! 譬如某次有人反映需要做以下这么一个效果:当鼠标移入背景图片时,将有一个遮罩层升起,当鼠标移出后,遮罩层落下(如图),该效果还是很常见的: 其采用jquery的animate()结合鼠标的移入移出事件来处理

JS添加、设置属性以及鼠标移入移出事件

源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; } #wk{ width:100px; } .pname{ width: 100px; height: 50px; line-height: 50p

js(jquery)鼠标移入移出事件时,出现闪烁、隐藏显示隐藏显示不停切换的情况

<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },function(){ $(".weixinTop").hide(); }); </script> js代码如上: 最终发现: class="weixinTop" 的div,把class="guanzhu"所在的层遮住了,导致类似鼠标移出的效果,移出之

jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件,即使添加了event.stopPropagation();return false; mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件,即使添加了event.stopPropagation();return false;

用JQuery给图片添加鼠标移入移出事件

$("#addLineImg").mouseover( function(){ $("#addLineImg").attr("src","pages/annottor/claim/img/plus2.png"); } ); $("#addLineImg").mouseout( function(){ $("#addLineImg").attr("src","

Jquery事件:鼠标移入移出(mouseenter,mouseleave)

前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论我怎么调试只有mouseover方法可以,mouseout方法失效. 于是就google,百度寻找解决答案,可是找了好久都没找到合适的答案.只好问问同事了,同事看了我的代码后也觉得没有问题,但是怎么测都失效. 往往在一条路上遇到问题后,通过各种方式都解决不了时,我们就要调整思路转换道路. 同事跟我说

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g