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

亦凉 2022-09-25 06:29 598阅读 0赞

**转载地址：http://www.jb51.net/article/85977.htm**

**问题描述**

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

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

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

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>src=</code> 
      <code>"<a href="https://code.jquery.com/jquery-1.12.4.js" rel="nofollow">https://code.jquery.com/jquery-1.12.4.js</a>"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id1"</code> 
      <code>style=</code> 
      <code>"width:800px; height:400px; background-color:#F23"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id2"</code> 
      <code>style=</code> 
      <code>"width:400px; height:300px; background-color:#0F8; display:none;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>"#id1"</code> 
      <code>).mouseover(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>this</code> 
      <code>).children().fadeIn(1000);</code> 
     </div> 
     <div> 
      <code>}).mouseout(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>this</code> 
      <code>).children().fadeOut(1000);</code> 
     </div> 
     <div> 
      <code>}); </code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[![这里写图片描述][2016060613354215.png]][2016060613354215.png]

**问题解决办法**

最开始的问题分析，当鼠标从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代码改为如下，很好解决了问题。

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <span style="color:#ff0000">1</span> 
    </div> 
    <div> 
     <span style="color:#ff0000">2</span> 
    </div> 
    <div> 
     <span style="color:#ff0000">3</span> 
    </div> 
    <div> 
     <span style="color:#ff0000">4</span> 
    </div> 
    <div> 
     <span style="color:#ff0000">5</span> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <pre><code>&lt;span style="color:#ff0000;"&gt;$("#id1").mouseenter(function(){
$(this).children().fadeIn(1000);
}).mouseleave(function(){
$(this).children().fadeOut(1000);
});&lt;/span&gt;</code></pre> 
      <br> 
      <br> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout  
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave

这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。

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

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

**1.mouseover与mouseenter**

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

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

**2.mouseout与mouseleave**

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

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

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

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

为了验证将代码改为如下

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>src=</code> 
      <code>"<a href="https://code.jquery.com/jquery-1.12.4.js" rel="nofollow">https://code.jquery.com/jquery-1.12.4.js</a>"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id1"</code> 
      <code>style=</code> 
      <code>"width:800px; height:400px; background-color:#F23"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id2"</code> 
      <code>style=</code> 
      <code>"width:400px; height:300px; background-color:#0F8; position:absolute; top:300px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>"#id1"</code> 
      <code>).mouseover(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>//$(this).children().fadeIn(1000);</code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'a'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>}).mouseout(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>//$(this).children().fadeOut(1000);</code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'b'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>}); </code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

[![这里写图片描述][2016060613354216.png]][2016060613354216.png]

可以看出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函数如下

[![这里写图片描述][2016060613354217.jpg]][2016060613354217.jpg]

可以简化为如下

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>//判断两个a中是否包含b </code> 
     </div> 
     <div> 
      <code>function</code> 
      <code> contains(a,b){ </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> a.contains ? a != b &amp;&amp; a.contains(b) :!!(a.compareDocumentPosition(b) &amp; 16); </code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**compareDocumentPosition介绍**

这个方法是 DOM Level 3 specification 的一部分，允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。NodeA.compareDocumentPosition(NodeB)返回的信息描述如下：

比特 序号 意义

[![201666133334682.png_201656133358][]][201666133334682.png_201656133358]

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

**获取兼容性性的relatedTarget**

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>function</code> 
      <code> getRelated(e){ </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> type=e.type.toLowerCase();</code> 
      <code>//这里获取事件名字 </code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(type==</code> 
      <code>'mouseover'</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>related=e.relatedTarget||e.fromElement</code> 
     </div> 
     <div> 
      <code>}</code> 
      <code>else</code> 
      <code>if</code> 
      <code>(type=</code> 
      <code>'mouseout'</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>related=e.relatedTarget||e.toElement</code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> related;&nbsp; </code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**改进mouseover和mouseout**

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!DOCTYPE html&gt; </code> 
     </div> 
     <div> 
      <code>&lt;html&gt; </code> 
     </div> 
     <div> 
      <code>&lt;head&gt; </code> 
     </div> 
     <div> 
      <code>&lt;title&gt;&lt;/title&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/head&gt; </code> 
     </div> 
     <div> 
      <code>&lt;body&gt; </code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id1"</code> 
      <code>style=</code> 
      <code>"width:800px; height:400px; background-color:#F23"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id2"</code> 
      <code>style=</code> 
      <code>"width:400px; height:300px; background-color:#0F8; position:absolute; top:300px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>src=</code> 
      <code>"<a href="https://code.jquery.com/jquery-1.12.4.js" rel="nofollow">https://code.jquery.com/jquery-1.12.4.js</a>"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>//判断两个a中是否包含b </code> 
     </div> 
     <div> 
      <code>function</code> 
      <code> contains(a,b){ </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> a.contains ? a != b &amp;&amp; a.contains(b) :!!(a.compareDocumentPosition(b) &amp; 16); </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>function</code> 
      <code> getRelated(e){ </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> type=e.type.toLowerCase();</code> 
      <code>//这里获取事件名字 </code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(type==</code> 
      <code>'mouseover'</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>related=e.relatedTarget||e.fromElement</code> 
     </div> 
     <div> 
      <code>}</code> 
      <code>else</code> 
      <code>if</code> 
      <code>(type=</code> 
      <code>'mouseout'</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>related=e.relatedTarget||e.toElement</code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> related;&nbsp; </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>$(</code> 
      <code>"#id1"</code> 
      <code>).mouseover(</code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>//判断鼠标从哪移到id1上面</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related=getRelated(e);&nbsp; </code> 
     </div> 
     <div> 
      <code>//如果related是id1的子元素id2，即从子元素id2移动到id1，或是related为id1，即从id1移动到其子元素id2上面，则不进行任何操作，否则进行相应的操作</code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(</code> 
      <code>this</code> 
      <code>!=related &amp;&amp; !contains(</code> 
      <code>this</code> 
      <code>,related)){ </code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'mouseover'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>}).mouseout(</code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>//判断鼠标要从id1上面移动到哪去？</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related=getRelated(e);&nbsp; </code> 
     </div> 
     <div> 
      <code>//如果related是id1，即当id1从其子元素移动到id1上，或是related是id2，即从id1上移动到其子元素，不进行任何操作，否则进行相应的操作</code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(</code> 
      <code>this</code> 
      <code>!=related &amp;&amp; !contains(</code> 
      <code>this</code> 
      <code>,related)){ </code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'mouseout'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>}); </code> 
     </div> 
     <div> 
      <code>}); </code> 
     </div> 
     <div> 
      <code>&lt;/script&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/body&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/html&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

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

[![这里写图片描述][2016060613354218.jpg]][2016060613354218.jpg]

**代码的封装**

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

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>(</code> 
      <code>function</code> 
      <code>(w){ </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> dqMouse = </code> 
      <code>function</code> 
      <code>(obj) { </code> 
     </div> 
     <div> 
      <code>// 函数体 </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> new</code> 
      <code>dqMouse.fn.init(obj); </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>dqMouse.fn = dqMouse.prototype = { </code> 
     </div> 
     <div> 
      <code>// 扩展原型对象 </code> 
     </div> 
     <div> 
      <code>obj:</code> 
      <code>null</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>dqMouse: </code> 
      <code>"1.0.0"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>init: </code> 
      <code>function</code> 
      <code>(obj) { </code> 
     </div> 
     <div> 
      <code>this</code> 
      <code>.obj=obj;</code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> this</code> 
      <code>; </code> 
     </div> 
     <div> 
      <code>}, </code> 
     </div> 
     <div> 
      <code>contains:</code> 
      <code>function</code> 
      <code>(a,b) { </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> a.contains ? a != b &amp;&amp; a.contains(b) :!!(a.compareDocumentPosition(b) &amp; 16); </code> 
     </div> 
     <div> 
      <code>}, </code> 
     </div> 
     <div> 
      <code>getRelated:</code> 
      <code>function</code> 
      <code>(e) { </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> type=e.type.toLowerCase();</code> 
      <code>//这里获取事件名字 </code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(type==</code> 
      <code>'mouseover'</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>related=e.relatedTarget||e.fromElement</code> 
     </div> 
     <div> 
      <code>}</code> 
      <code>else</code> 
      <code>if</code> 
      <code>(type=</code> 
      <code>'mouseout'</code> 
      <code>){ </code> 
     </div> 
     <div> 
      <code>related=e.relatedTarget||e.toElement</code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> related;&nbsp; </code> 
     </div> 
     <div> 
      <code>}, </code> 
     </div> 
     <div> 
      <code>over:</code> 
      <code>function</code> 
      <code>(fn){ </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> obj=</code> 
      <code>this</code> 
      <code>.obj; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> _self=</code> 
      <code>this</code> 
      <code>; </code> 
     </div> 
     <div> 
      <code>obj.onmouseover=</code> 
      <code>function</code> 
      <code>(e){&nbsp;</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related=_self.getRelated(e);&nbsp; </code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(</code> 
      <code>this</code> 
      <code>!=related &amp;&amp; !_self.contains(</code> 
      <code>this</code> 
      <code>,related)){ </code> 
     </div> 
     <div> 
      <code>fn(); </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> _self; </code> 
     </div> 
     <div> 
      <code>}, </code> 
     </div> 
     <div> 
      <code>out:</code> 
      <code>function</code> 
      <code>(fn){ </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> obj=</code> 
      <code>this</code> 
      <code>.obj; </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> _self=</code> 
      <code>this</code> 
      <code>; </code> 
     </div> 
     <div> 
      <code>obj.onmouseout=</code> 
      <code>function</code> 
      <code>(e){ </code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> related=_self.getRelated(e);&nbsp; </code> 
     </div> 
     <div> 
      <code>if</code> 
      <code>(obj!=related &amp;&amp; !_self.contains(obj,related)){ </code> 
     </div> 
     <div> 
      <code>fn(); </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>return</code> 
      <code> _self; </code> 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
     <div> 
      <code>}&nbsp; </code> 
     </div> 
     <div> 
      <code>dqMouse.fn.init.prototype = dqMouse.fn;</code> 
     </div> 
     <div> 
      <code>window.dqMouse = window.$$= dqMouse;</code> 
     </div> 
     <div> 
      <code>})(window);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

调用的源文件如下：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id1"</code> 
      <code>style=</code> 
      <code>"width:800px; height:400px; background-color:#F23"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;div id=</code> 
      <code>"id2"</code> 
      <code>style=</code> 
      <code>"width:400px; height:300px; background-color:#0F8; position:absolute; top:300px;"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;/div&gt; </code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>src=</code> 
      <code>"dqMouse.js"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;script type=</code> 
      <code>"text/javascript"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>var</code> 
      <code> id1=document.getElementById(</code> 
      <code>'id1'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>$$(id1).over(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'mouseover'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>}).out(</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>console.log(</code> 
      <code>'mouseout'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>});&nbsp; </code> 
     </div> 
     <div> 
      <code>&lt;/script&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

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

[Link 1]: http://www.jb51.net/article/85977.htm#
[2016060613354215.png]: /images/20220718/b54ce6324f6f4e4a9a890f60e2d8efc4.png
[2016060613354216.png]: /images/20220718/e791502ccd2b4648956aa282e296975b.png
[2016060613354217.jpg]: /images/20220718/d8140136c8724c469b5f499c14419d23.png
[201666133334682.png_201656133358]: /images/20220718/9196f2381bb846f3b4ff621d4ddf077f.png
[2016060613354218.jpg]: /images/20220718/31fee74db06f456fb2618e645ef5e9dd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，598人围观）

还没有评论，来说两句吧...

相关阅读

相关 leaflet鼠标进出事件 mouseover和mouseout （示例代码009）

![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第009个 [点击查看专栏目录][Link 1]

谁借莪１个温暖的怀抱￠/ 2024年04月07日 15:34/ 0 赞/ 65 阅读

相关 js中鼠标事件mouseover、mouseenter和mouseleave、mouseout的区别

> mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout > > mouseenter:当鼠标移除元素本身

我会带着你远行/ 2022年10月15日 10:55/ 0 赞/ 417 阅读

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

转载地址：http://www.jb51.net/article/85977.htm 问题描述我希望当鼠标移动到id1上的时候，id2显示，当鼠标离开id1的时

亦凉/ 2022年09月25日 06:29/ 0 赞/ 599 阅读

相关 JQuery mouseover与mouseenter,mouseout与mouseleave的区别

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

心已赠人/ 2022年09月21日 01:11/ 0 赞/ 103 阅读

相关 js mouseover/mouseout不停地循环

情形：我要在鼠标经过tbody中的tr时，会产生事件。这个事件是给tr中的td写内容，内容是带标签的，如： <p>abc</p>。结果发现，当鼠标经过

阳光穿透心脏的1/2处/ 2022年08月04日 13:00/ 0 赞/ 148 阅读

相关火狐FireFox兼容mouseover,mouseout的解决方案

今天在用anjularjs做前端开发时，遇到一个火狐不兼容的问题。主要是一个div的mouseover和mouseout事件触发的兼容性。开发时用的谷歌浏览器，所以事件运行效果

怼烎@/ 2022年06月09日 08:27/ 0 赞/ 524 阅读

相关 js mouseover,mouseout出现闪烁情况

$("id").hover(function(){ var that=this;

怼烎@/ 2022年05月19日 13:53/ 0 赞/ 306 阅读

相关 Html js鼠标 Mouseover事件和Mouseout事件

Html js鼠标事件 Mouseover事件（重点）：鼠标移动到标签之上 Mouse 鼠标 Over 在…之上 Mouseout事件（重点）：鼠标离开标签

浅浅的花香味﹌/ 2022年04月15日 02:08/ 0 赞/ 298 阅读

相关 mouseover和mouseout多次触发解决方法(兼容ie和firefox)（转）

在用到mouseover和mouseout事件来作为事件触发的条件，但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseo

我就是我/ 2022年01月11日 23:11/ 1 赞/ 429 阅读

相关 JS--JavaScript使用鼠标事件（click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove）

鼠标事件 <table> <thead> <tr> <th align="center">事件类型</th> <th align="center

冷不防/ 2021年08月13日 12:47/ 0 赞/ 428 阅读