伏龙阁资源网

JS中mouseover和mouseout多次触发问题如何解决
站长资源 2024/11/28 佚名
2 0

问题描述

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

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

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

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

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


JS中mouseover和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有不显示变为显示。


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


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





$("#id1").mouseenter(function(){
$(this).children().fadeIn(1000);
}).mouseleave(function(){
$(this).children().fadeOut(1000);
});





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


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


1.mouseover与mouseenter


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


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


2.mouseout与mouseleave


不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。


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


现象确实是这个现象，但是过程说的有点模糊，我的理解如下：


当鼠标指针移动到被选元素，会触发 mouseover 事件，这个大家都知道，当鼠标指针由被选元素移动到其子元素，先是触发被选元素的mouseout事件，然后子元素的mouseover事件冒泡到被选元素，此时相当于被选元素先执行了一个mouseout事件，然后执行了一个mouseover事件。 




为了验证将代码改为如下





<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


鼠标从页面移动到id1，然后由id1移动到id2上，控制台输出如下图


JS中mouseover和mouseout多次触发问题如何解决 


可以看出id1先后调用了mouseover、mouseout、mouseover事件，正好和上面分析的相同。


mouseenter与mouseleave实现分析


原理分析


从上面分析，我们可以看出，要实现mouseenter与mouseleave的效果，就是当鼠标从被选元素移动到其子元素上的时候，被选元素不执行mouseout事件，也不执行子类冒泡过来的mouseover事件，当鼠标从被选元素子元素移动到被选元素上的时候，被选元素不执行mouseover事件，也不执行子类冒泡过来的mouseout事件。


要实现上面的效果，我们需要event对象的一个属性relatedTarget，这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时，relatedTarget属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性，不过它有代替的属性，分别是 fromElement和toElement。除此，我们还需要contains方法，来判断一个对象是否包含在另外一个对象中。


这样当鼠标移动，需要判断以下两条即可


1.调用mouseover，只需要判断relatedTarget是否被选元素的子元素，如果是，则不执行（当于从被选元素子元素移动到被选元素，不执行mouseover；当于从被选元素移动到被选元素子元素，不执行冒泡过来的mouseover）；


2.调用mouseout，只需要判断relatedTarget是否被选元素的子元素，如果是，则不执行（当于从被选元素子元素移动到被选元素，不执行子元素冒泡过来的mouseout；当于从被选元素移动到被选元素子元素，不执行mouseover）；


实现过程


判断两个元素是否存在包含关系


jquery中封装了contains函数如下


JS中mouseover和mouseout多次触发问题如何解决 


可以简化为如下





//判断两个a中是否包含b
function contains(a,b){
return a.contains "text-align: center">JS中mouseover和mouseout多次触发问题如何解决


通过上面我们就可以理解为什么要写成a.compareDocumentPosition(b) & 16因为如果节点 A 包含节点 B，就会返回16，16&16=1，其他的情况结果都会0。


获取兼容性性的relatedTarget


为了兼容各种浏览器，参考jquery源码，写出如下代码，来获取mouseover和mouseout事件目标节点的相关节点的属性relatedTarget。





function getRelated(e){
var related;
var type=e.type.toLowerCase();//这里获取事件名字
if(type=='mouseover'){
related=e.relatedTarget||e.fromElement
}else if(type='mouseout'){
related=e.relatedTarget||e.toElement
}
return related; 
}





改进mouseover和mouseout


改进mouseover和mouseout以实现改进mouseenter与mouseleave效果，所有代码如下。





<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="id1" style="width:800px; height:400px; background-color:#F23">
<div id="id2" style="width:400px; height:300px; background-color:#0F8; position:absolute; top:300px;">
</div>
</div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


测试，鼠标移动路线如下图路线


由控制台可以很看出，此刻的mouseover和mouseout已经完全具备mouseenter与mouseleave效果效果。


JS中mouseover和mouseout多次触发问题如何解决 


代码的封装


如果每次进行这样的操作，都需要加载Jquery或是写很多代表，将是件繁琐的事，为了便于以后操作，进行了适当的封装，模拟Jquery，生成自己的mouseenter与mouseleave。代码封装到dqMouse.js文件中，如下：





(function(w){
var dqMouse = function(obj) {
// 函数体
return new dqMouse.fn.init(obj);
}
dqMouse.fn = dqMouse.prototype = {
// 扩展原型对象
obj:null,
dqMouse: "1.0.0",
init: function(obj) {
this.obj=obj;
return this;
},
contains:function(a,b) {
return a.contains "htmlcode">



<div id="id1" style="width:800px; height:400px; background-color:#F23">
<div id="id2" style="width:400px; height:300px; background-color:#0F8; position:absolute; top:300px;">
</div>
</div>
<script type="text/javascript" src="/UploadFiles/2021-04-02/dqMouse.js">


以上所述是小编给大家介绍的JS中mouseover和mouseout多次触发问题如何解决的相关内容，希望对大家有所帮助！


                                

                                

                                     

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
www.wwsws.com
                                            
                                                伏龙阁资源网 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            39,976影音资源
                                        

                                        

                                            44,792技术资源
                                        

                                        

                                            21,817软件资源
                                        

                                        

                                            651,128站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接