CODEWITHSUNDEEP
javascriptjqueryhtmliframeweb-applications
Lloyd aaron
Lloyd aaron

Reputation: 292

javascript mouseout triggers on interactive iframe

I have a virtual tour iframe and the jquery mouseout event casually triggers when i'm navigating the controls of the iframe.
Why is jquery mouseout event triggers when i'm only navigating the controls in the iframe.

I don't want the mouseout trigger when I'm only navigating the iframe controls because I have another function for the iframe mouseout.

here's the example`

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

Upvotes: 0

Views: 93

Answers (1)

Vinutha N
Vinutha N

Reputation: 166

Below code can help you,

//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);

Upvotes: 1

Related Questions