How to pass mouse events to an iframe

How to pass mouse events to an iframe

I am needing to use jQuery UI in a child iframe of my host page. My issue is that drag operations work poorly if the users mouse travels outside the child iframe and into the parent. If this happens the mousemove events or mouseup event are no longer sent to the UI control. I have solved this with my own GUI functions by simply having the parent pass these events to the child for processing but with jQuery UI I do not know how to pass these events through properly. In the sample below I show my failed attempt at using trigger to pass the event to the child iframe.
 
Does anyone know of a way to pass these events through to the child iframe and have jQuery UI be able to process them properly ?
 
Here is my host page:
  1. <!DOCTYPE html>
    <html lang="en-us">
    <head>
        <script src="/SharedLib/jquery-1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            var MouseMoveCallback;
            function OnMouseMove(e) {
                if (MouseMoveCallback)
                    MouseMoveCallback(e);
            }
            $(document).ready(function () {
                $(document).mousemove(OnMouseMove);
            });
        </script>
    </head>
    <body>
        <p>
            If your mouse strays outside of the iframe during a drag of the slide handle
            it no longer moves or detects mouseup.
        </p>
        <iframe src="EventTestChildFrame.html" style="width: 500px; height: 80px;">
        </iframe>
    </body>
    </html>






















Here is my child iframe which loses the mouse events:

  1. <!DOCTYPE html>
    <html lang="en-us">
    <head>
        <link href="/SharedLib/jquery-ui-1.9.2.custom/css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
        <script src="/SharedLib/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script src="/SharedLib/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>
        <script type="text/javascript">
            function OnMouseMove(e) {
                // this doesn't work...
                $(document).trigger("mousemove", e);
            }
            $(document).ready(function () {
                parent.MouseMoveCallback = OnMouseMove;
                $("#slider").slider();
            });
        </script>
    </head>
    <body style="background-color: #D0D0D0;">
        <p>Child iframe with jQuery UI control.</p>
        <div id="slider" style="margin: 8px;"></div>
    </body>
    </html>
     






















    • Topic Participants

    • mikeo