交互式iframe上的javascript mouseout触发器

时间:2017-04-26 11:32:23

标签: javascript jquery html5 iframe web-applications

当我浏览iframe的控件时,我有一个虚拟游览iframe和jquery mouseout事件随便触发。
当我只导航iframe中的控件时,为什么会触发jquery mouseout事件。

当我只导航iframe控件时,我不想要mouseout触发器,因为我有另一个iframe mouseout函数。

这是example`

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

1 个答案:

答案 0 :(得分:0)

下面的代码可以帮助您,

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