Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1096
  • Last Modified:

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>
0
mtnr
Asked:
mtnr
  • 7
  • 2
1 Solution
 
numbers1to9Commented:
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&

0
 
numbers1to9Commented:
Sorry about that, ignore my input.
0
 
numbers1to9Commented:
I am really sorry for my last input; I'm really tired and I underestimated your question.

Try this:

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

<html>
<head>
<script>

function test() {

  x = document.getElementById('main');
  z = document.getElementById('report');

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

  document.onmouseup =
  x.contentWindow.document.onmouseup = function() {

    z.innerHTML = 'mouse up';

  }

}

</script>
</head>
<body onload="test()">

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

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

</iframe>


</body>
</html>

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

It is tested in Firefox.


0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
numbers1to9Commented:
... And works in IE 6...
0
 
BraveBrainCommented:
Works in IE7 as well ;)
0
 
mtnrAuthor Commented:
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/" ...)
0
 
numbers1to9Commented:
My first 500! Yeah! yeah!... Oh, yeah. sorry to hear that it doesn't work with the "src" attribute--yada-yada-yada--500!!! YEAH!
0
 
numbers1to9Commented:
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?).
0
 
mtnrAuthor Commented:
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:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22727126.html
0
 
numbers1to9Commented:
I will check in to see how things work out -- I am really curious about the solution!

Anyway, good luck!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now