来自 服务器&运维 2019-12-04 16:28 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

鼠标经过子元素触发mouseout,mouseover事件的解决方案_javascript技巧_脚本之家

本文实例讲述了IE中鼠标经过option触发mouseout的解决方法。分享给大家供大家参考。具体分析如下:

问题描述

我想实现的目标:当鼠标进入黑色框时,橙色框执行淡入动画;当黑色框范围移动的时候;当鼠标移出的时候,橙色方块消失。

要实现的功能:

我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示。问题如下:

遇到的问题阐述:当鼠标移入黑色框的时候,橙色框执行淡入动画,但是当鼠标从黑色框经过粉色框的时候,橙色框就消失了,然后又执行一遍淡入动画。当鼠标从粉色框移出到黑色框的时候,橙色框的淡入动画又被执行。这不是我想要的。

有一个DIV,当鼠标经过时此DIV完全展开,当鼠标移开时DIV收缩回去,其中DIV里面有一个select选择框;

1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示

 mouseover mouseout  .parent{ width:200px; height:200px; background:black;}.child{ width:100px; height:100px; background:pink;}.a1{ width:40px; height:40px; background:orange; display:none;}   $.on('mouseover',function.show; $.on('mouseout',function.css;

操作select的时候在IE中会出现一个问题,当鼠标经过option时,DIV会收缩回去,而在其他浏览器中无此现象。

2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示

首先我们解释一下原因,为什么会出现这些问题。

解决的方法:

我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化。

当鼠标从黑色框移到粉色框的时候,此时黑色框的mouseout的被触发,又由于事件冒泡,黑色框的mouseover事件随即被触发,所以实际上,橙色框先消失,然后立即执行淡入动画。这也就是我们看到的过程。

在IE中,当鼠标移到option时 window.event.toElement 的值为null,在其他浏览器中的值为object;

$.mouseover.children.mouseout.children;

当鼠标从粉色框移到黑色框的时候,此时黑色框的mouseout又被触发(因为不论鼠标穿过被选元素或其子元素,都触发 mouseover 事件),同时mouseover也被触发,所以又出现了再次执行淡入效果的过程。

当鼠标直接从DIV中移出时 window.event.toElement 的值为object,其他浏览器也是;

问题解决办法

方法一:用mouseleave/mouseout代替mouseover/mouseout

综上,可以在mouseout中添加下面代码即可解决问题:

最开始的问题分析,当鼠标从id1上移动到id2上的时候,由于鼠标由id2离开进入id1,针对id1触发了一个mouseout事件,于是id2有显示变为不显示,接着在鼠标移动到id2上,在id2上触发了一个mouseover事件,由于冒泡机制,id2上的mouseover冒泡到id1之前,触发了id1上的mouseover事件,然后id2由不显示变为显示。同理,当鼠标从id2上移动到id1上的时候,针对id2,触发了一个mouseout事件,还是因为冒泡机制,mouseout事件传到id1上,id2由显示变为不显示,接着鼠标移动到id1之前,触发了一个mouseover事件,然后id2有不显示变为显示。

先看一下mouseout&mouseover与mouseleave&mouseenter用法上的区别

if (window.event.toElement == null) return;

看来,上面的问题归根要解决的是,当鼠标由id1上移动到id2上的时候,阻止id1的mouseout事件;当鼠标从id2上移动到id1上的时候,阻止id2的mouseout事件冒泡到id1之上。那么仅仅通过阻止冒泡是解决不了问题。

mouseover与mouseenter

希望本文所述对大家的javascript程序设计有所帮助。

为了解决这样的问题,jQuery提供了mouseenter和mouseleave方法。于是将JS代码改为如下,很好解决了问题。

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针从元素外穿入被选元素时,才会触发 mouseenter 事件。

$.mouseenter.children.mouseleave.children;

mouseout与mouseleave

很多地方都有介绍mouseenter、mouseleave与mouseover、mouseout,于是复制粘贴了一个。

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针从元素内穿出被选元素时,才会触发 mouseleave 事件。

/*********************************************************/

可以看一个简单的例子看看二者的区别

1.mouseover与mouseenter

 mouseover mouseout  .parent{ width:200px; height:200px; background:black;}.child{ width:100px; height:100px; background:pink;}.a1{ width:40px; height:40px; background:orange; display:none;}   $.on('mouseenter',function.show; $.on('mouseleave',function.css;

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

方法二:利用e.stopPropagation()阻止事件进一步传播

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

e.stopPropagation()会终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

2.mouseout与mouseleave

 mouseover mouseout  .parent{ width:200px; height:200px; background:black;}.child{ width:100px; height:100px; background:pink;}.a1{ width:40px; height:40px; background:orange; display:none;}     $.on('mouseover',function.show; $.on('mouseout',function.css; $.on('mouseover',function{ e.stopPropagation.css; //这是保证动画体的末状态不变 }); $.on('mouseout',function{ e.stopPropagation(); //防止从粉色框移出到黑色框时再次触发其他事件 }) 

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:鼠标经过子元素触发mouseout,mouseover事件的解决方案_javascript技巧_脚本之家

关键词: