JavaScriptとJQueryのマウスmouseイベントバブル処理

簡単なマウス移動イベント:
に入る

 
  
 mouseenter：    
  
 mouseover:    
  
 
 

マウスポインタが選択された要素またはそのサブ要素を通過しても、mouseoverイベントはマウスポインタが選択された要素を通過した場合にのみトリガーされます.
移動

 
  
 mouseleave:     
  
 mouseout：   
  
 
 

マウスポインタが選択された要素から離れてもサブ要素から離れても、mouseoutイベントはマウスポインタが選択された要素から離れたときにのみトリガーされます.
私たちは一つのケースを通じて問題を観察します.
ネストされた階層にmouseoutイベントをバインドすると、mouseoutイベントが想像とは異なることがわかります.

 
  
 
     
     
0
 
  
     
0
 
  
 
 
  <p></p> 
  <p>    var i = 0;<br>     var k = 0;</p> 
  <p>    document.querySelectorAll('.out')[0].addEventListener('mouseout',function(e){<br>         document.querySelectorAll("#inshow")[0].textContent = (++i)<br>        e.stopPropagation();<br>     },false)</p> 
  <p>   document.querySelectorAll('.in')[0].addEventListener('mouseout',function(){<br>        document.querySelectorAll("#outshow")[0].textContent = (++k)<br>     },false)</p> 
  <p>
  
 

問題mouseoutイベントを発見しました.
1.泡が出るのを止められない.内部のサブエレメントでもトリガーされます
同じ問題にmouseoverイベントもありますが、stopPropagationメソッドが無効になった場合、バブルをどのように停止しますか?
1.mouseoverとmouseoutの繰り返しトリガを阻止するために、ここでは、mouseoverとmouseoutイベントターゲットノードの関連ノードを判断するためのeventオブジェクトの属性relatedTargetを使用します.簡単に言えば、mouseoverイベントがトリガーされると、relatedTargetプロパティはマウスが離れたばかりのノードを表し、mouseoutイベントがトリガーされるとマウスが移動したオブジェクトを表します.MSIEはこの属性をサポートしていないため、代わりの属性があり、それぞれfromElementとtoElementです.2.この属性があれば、マウスがどのオブジェクトから移動し、どこに移動するかを知ることができます.これにより、この関連するオブジェクトがイベントをトリガーするオブジェクトの内部にあるかどうか、またはそのオブジェクト自体であるかどうかを判断することができます.この判断によって、本当にイベントをトリガーするかどうかを合理的に選択することができます.3.ここでは、あるオブジェクトが別のオブジェクトに含まれているかどうかを確認する方法、containsメソッドも使用します.MSIEとFireFoxはそれぞれ検査の方法を提供し,ここでは関数をカプセル化した.
jQueryの処理も同じです

 
  
 jQuery.each({ 
  
         mouseenter: "mouseover", 
  
         mouseleave: "mouseout", 
  
         pointerenter: "pointerover", 
  
         pointerleave: "pointerout" 
  
     }, function(orig, fix) { 
  
         jQuery.event.special[orig] = { 
  
             delegateType: fix, 
  
             bindType: fix, 
   
  
            handle: function(event) {
                 var ret,
                     target = this,
                     related = event.relatedTarget,
                     handleObj = event.handleObj;
 
  
                // For mousenter/leave call the handler if related is outside the target.
                 // NB: No relatedTarget if the mouse left/entered the browser window
                 if (!related || (related !== target && !jQuery.contains(target, related))) {
                     event.type = handleObj.origType;
                     ret = handleObj.handler.apply(this, arguments);
                     event.type = fix;
                 }
                 return ret;
             }
         };
     });