インタラクティブiframeでjavascript mouseoutトリガー

Question

iframeのバーチャルツアーを表示していて、iframeのコントロールをナビゲートしているときにjquery mouseoutイベントが発生することがあります。
iframe内のコントロールを移動するときにjquery mouseoutイベントがトリガーされるのはなぜですか。

iframeのマウス出力に別の機能があるため、iframeコントロールを操作しているときにmouseoutトリガーを必要としません。

はここに、あなたを助けることができるコードの下example `

$("iframe").mouseout(function() { 
    console.log("mouseout!"); 
}) 

Answer 1

だ

//This example assumes execution from the parent of the the iframe 

function bubbleIframeMouseMove(iframe){ 
    // Save any previous onmousemove handler 
    var existingOnMouseMove = iframe.contentWindow.onmousemove; 

    // Attach a new onmousemove listener 
    iframe.contentWindow.onmousemove = function(e){ 
     // Fire any existing onmousemove listener 
     if(existingOnMouseMove) existingOnMouseMove(e); 

     // Create a new event for the this window 
     var evt = document.createEvent("MouseEvents"); 

     // We'll need this to offset the mouse move appropriately 
     var boundingClientRect = iframe.getBoundingClientRect(); 

     // Initialize the event, copying exiting event values 
     // for the most part 
     evt.initMouseEvent( 
      "mousemove", 
      true, // bubbles 
      false, // not cancelable 
      window, 
      e.detail, 
      e.screenX, 
      e.screenY, 
      e.clientX + boundingClientRect.left, 
      e.clientY + boundingClientRect.top, 
      e.ctrlKey, 
      e.altKey, 
      e.shiftKey, 
      e.metaKey, 
      e.button, 
      null // no related element 
     ); 

     // Dispatch the mousemove event on the iframe element 
     iframe.dispatchEvent(evt); 
    }; 
} 

// Get the iframe element we want to track mouse movements on 
var myIframe = document.getElementById("myIframe"); 

// Run it through the function to setup bubbling 
bubbleIframeMouseMove(myIframe);