Link to home
Start Free TrialLog in
Avatar of mtnr
mtnr

asked on

mouseup event lost when pointer moves off iframe; want to capture mouseup even when mouse moves off handled element.

Click on iframe border without moving mouse, and you can see you get correct mouseup and mousedown firings.

(Box in upper left corner reports what's going on.)

But now click on iframe border, move mouse inside iframe while you keep button down, then release button.  When you do this, the iframe never gets the mouseup firing.

How can I capture the mouseup even when the mouse has strayed inside the iframe?

Or can I somehow make the iframe "all of a piece" -- the elements inside not behaving seperately? If that makes any sense.

And yes, it has to be an iframe.

Thank you.

Begin html:


<html>
<head>
<script>
function onDown(e){
document.getElementById('report').innerHTML = 'mouse down';
}

function onUp(e){
document.getElementById('report').innerHTML = 'mouse up';
}

</script>
</head>
<body>
<div id="report">click iframe border to start.</div>

<iframe id="main" onmousedown="onDown(event)" onmouseup="onUp(event)" style="width:400px;height:200px;border:3px solid blue;">
<p>Random stuff contained in iframe here.</p>
</iframe>


</body>
</html>
Avatar of numbers1to9
numbers1to9

Hi, here is a funny idea.

========================================================================

<html>
<head>
<script>
function onDown(e){
document.getElementById('test').innerHTML = 'mouse down';
}

function onUp(e){
document.getElementById('test').innerHTML = 'mouse up';
}



</script>
</head>
<body>
<div id="report">click iframe border to start.</div>

<div id="test" onmousedown="onDown(event)" onmouseup="onUp(event)"
style="width:100%;
       height:100%;
       border:3px solid blue;
       background-color:transparent;
       position:relative;
       z-index:99;
"
>

<iframe id="main" style="width:400px;height:200px;border:3px solid blue;">
<p>Random stuff contained in iframe here.</p>
</iframe>

</div>

</body>
</html>

========================================================================

At least it minimises necessary JS code&

& Well, it was an idea&

Sorry about that, ignore my input.
ASKER CERTIFIED SOLUTION
Avatar of numbers1to9
numbers1to9

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
... And works in IE 6...
Avatar of BraveBrain
Works in IE7 as well ;)
Avatar of mtnr

ASKER

very impressive numbers1to9!  (and thanks for the test, bravebrain.)  it does exactly what I asked.  (unfortunately, for some reason it fails when I add a src to the iframe, like  src="http://www.yahoo.com/" ...)
My first 500! Yeah! yeah!... Oh, yeah. sorry to hear that it doesn't work with the "src" attribute--yada-yada-yada--500!!! YEAH!
Okok, I looked into it.

I think the reason the "src" attribute "kills" the script is because the iframe is an independent object (I am no JS expert so I am not going to speculate further into that matter).

This script:

function test() {
  z = document.getElementById('report');

  document.onmousedown = function() {
    z.innerHTML = 'mouse down';
  }

  document.onmouseup = function() {
    z.innerHTML = 'mouse up';
  }
}

Works everywhere in the page -- except the iframe -- it practically takes you back to square one; mouse up/down works everywhere except at the iframe area.

I am sorry but I can not further help you with this problem. I think -- and I am now only making a very non-qualified guess here -- that you need to calculate the mouse up/down position based on something else than layers (e.g. coordinates?).
Avatar of mtnr

ASKER

congrats on your first 500!! and it was a very good solution too -- except for those pesky web-served iframes...  thanks for taking a 2nd look at it too.

I know there is something called the "other domain" rule that treats iframes from other domains differently.  but it seems like "contentWindow" should belong to the outer document, not the iframe.  go figure.

by the way, I have re-asked the question to include that problem:

https://www.experts-exchange.com/questions/22727126/mouseup-event-lost-when-cursor-moves-off-edge-of-iframe-how-to-capture-it.html
I will check in to see how things work out -- I am really curious about the solution!

Anyway, good luck!