javascript鼠标移入移出事件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript鼠标移入移出事件相关的知识，希望对你有一定的参考价值。

鼠标移入1级菜单后，弹出2级菜单，鼠标移出1级菜单后，2级菜单被隐藏——鼠标移入2级菜单后，显示2级菜单，鼠标移出2级菜单后，2级菜单被隐藏。求解决鼠标移出1级菜单，还没有移入2级菜单的情况下，2级菜单自动隐藏的问题。

两种办法：2级菜单要紧挨着1级菜单，至少有一部分是相连的，这样鼠标沿着相连的部分移动，就不会让2级菜单自动隐藏了；或者在1级菜单的mouseout事件中，不要立刻让2级菜单隐藏，而是延迟一段时间再隐藏，比如 var t = setTimeout("2级菜单.style.display='none'",1000); ，这样的话，只要在1秒内鼠标移到2级菜单上即可，当然，2级菜单的mouseover事件要立刻执行 clearTimeout(t);。特别注意：变量t一定要设为全局的。 参考技术A

你要鼠标移出后1级菜单后2级菜单隐藏，又要鼠标移出1级菜单后移入2菜单前不隐藏 

但是你的一级菜单和二技菜单还不是连在一起 这个逻辑就本身有问题 

要实现你说的内容 方法有两个

1、修改排版 把一级菜单和二技菜单连在一起

2、对”鼠标移出后1级菜单后2级菜单隐藏”这个操作进行延时处理，示例


<html>
 <HEAD>
  <style>
  .menu1 color:red;background:yellow;
  .menu2_hide color:blue;display:none;
  .menu2_show color:blue;background:red;
  </style>
 </HEAD>


 <BODY>
 <span id='menu1' class='menu1'>menu1</span>
 <span id='menu2' class='menu2_hide'>menu2</span>
  <SCRIPT LANGUAGE="javascript">
  <!--
var timer;
document.getElementById('menu1').onmouseover=function()

document.getElementById('menu2').className='menu2_show'
;
document.getElementById('menu1').onmouseout =function()

timer = setTimeout("document.getElementById('menu2').className='menu2_hide';",200);
;

document.getElementById('menu2').onmouseover=function()

clearTimeout(timer);
document.getElementById('menu2').className='menu2_show'
;
document.getElementById('menu2').onmouseout =function()

document.getElementById('menu2').className='menu2_hide'
;
  //-->
  </SCRIPT>
 </BODY>
</HTML>

 参考技术B 要么就hover的时候增加width来连接二级菜单

要么就二级菜单加个底层背景.大小可以接上一级菜单 不过只有右边可以离开二级菜单时隐藏了
或者做成点击事件.直接解决

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方法便是解决子集影响父级的方法。

以上是关于javascript鼠标移入移出事件的主要内容，如果未能解决你的问题，请参考以下文章

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

jQuery链式调用、鼠标移入移出、轮播、键盘事件

认清鼠标移入移出事件

CSS之hover的使用和鼠标移入移出事件的区别addEventListenermouseentermouseleavequerySelectorsplit+~

jquery鼠标移入移出

vue中鼠标移入移出，怎么让其切换到里面的内容