window.event - object required.

[mike]

I have this script executing
<script>
function mike_test(event)
{
x = window.event.clientX;
alert(x);
}
</script>
<iframe src="blank.html" id="my_iframe1">
</iframe>

and in blank.html I have:

<div onmousedown="parent.mike_test(event);">
... some stuff
</div>

But I am getting "Object Required" when I execute mike_test(event);

 

[James]

Remove the window from your function:

function mike_test(event)
{
var x = event.clientX;
alert(x);
}

James
http://www.logicwebstudio.com

 

[mike]

I tried that but I get an erroreous value, I guess because the
onmousedown event is located in the iframe.

If i move the:

onmousedown="parent.mike_test(event);"

to the iframe like:

<iframe src="blank.html" id="my_iframe1"
onmousedown="parent.mike_test(event);">
</iframe>

then it works fine.

Mike

 

[RobG]

I have this script executing
<script>

The type attribute is required:

function mike_test(event)
{
x = window.event.clientX;

IE seems to have adopted the W3C event model for iFrames.

The function is running in the parent window, so window.event (in IE)
refers to the event property of the parent window. Since no event is
fired in the parent window by a click in the iFrame, window.event is
undefined.

Using the W3C event model, you pass 'event' from the div's click event
and it goes into the function's local variable named 'event' (I think
that's confusing... but maybe that's just me) but then don't use it -
you use window.event instead.

So change the reference to the local 'event' variable and life if good
again. Incidentally, it works in IE too hence my supposition regarding
event models.

alert(x);
}
</script> [...]

But I am getting "Object Required" when I execute mike_test(event);

Change the script in the parent to:

<script type="text/javascript">

function mike_test(e)
{
var e = e || window.event; // event may come from iFrame or parent
var x = e && e.clientX; // In case e isn't defined
alert(x);
}

</script>

 

[Richard Cornford]

The type attribute is required:



IE seems to have adopted the W3C event model for iFrames.

<snip>

It hasn't. remember that the event handler is defined in an HTML
attribute as:-

<div onmousedown="parent.mike_test(event);">

- and since the code from the attribute value becomes the body of an
event handler function that function body refers to the unqualified
identifier - event -. In W3C borrowers that identifier refers to an -
event - parameter automatically included in the generated event handler
function. In IE the identifier is resolved against the scope chain. As
the window/global object has a property called "event" the unqualified
identifier is resolved as the value of that property (assuming the name
is not masked by a property of another object on the scope chain. The
global object on the end of that event handler's scope chain is the one
belonging to the IREAME.

The - mike_test - function will be passed an event object in both
systems.

The later comment from the OP that "I get an erroneous value" probably
indicates that the clientX property is returning the X co-ordinate of
the mouse in the IFRAME's client region (as would be expected) instead
of the topmost window object's client region.

Richard.

 

[mike]

The later comment from the OP that "I get an erroneous value" probably

indicates that the clientX property is returning the X co-ordinate of
the mouse in the IFRAME's client region (as would be expected) instead
of the topmost window object's client region.

Yes I think Richard. is correct the X co-ordinate is wrong and it is
looking at the iframe and not the topmost window.

Sounds to me like there is not a workaround.

When I move the onmousedown event to the iframe tag then the topmost
window coordinate is seen. However, the bad is that I have nothing to
click on so it is dragable. If I add style to the iframe in terms of a
larger border, then when it is moved by a select element, the select
element occludes it. It's ugly.

So, that is why I was attempting to put the onmousedown event inside
the iframe src, but I get erroneous coordinates.

There then is the difficulty.

 

[RobG]

<snip>

It hasn't. remember that the event handler is defined in an HTML
attribute as:-

<div onmousedown="parent.mike_test(event);">

- and since the code from the attribute value becomes the body of an
event handler function that function body refers to the unqualified
identifier - event -. In W3C borrowers that identifier refers to an -
event - parameter automatically included in the generated event handler
function. In IE the identifier is resolved against the scope chain. As
the window/global object has a property called "event" the unqualified
identifier is resolved as the value of that property (assuming the name
is not masked by a property of another object on the scope chain. The
global object on the end of that event handler's scope chain is the one
belonging to the IREAME.

The - mike_test - function will be passed an event object in both
systems.

Thanks, I forgot about in-line code, I was thinking of dynamically
attached functions.

The later comment from the OP that "I get an erroneous value" probably
indicates that the clientX property is returning the X co-ordinate of
the mouse in the IFRAME's client region (as would be expected) instead
of the topmost window object's client region.

Yes, you are right - I've posted a solution in reply to Mike.

 

[RobG]

Yes I think Richard. is correct the X co-ordinate is wrong and it is
looking at the iframe and not the topmost window.

Sounds to me like there is not a workaround.

So you are after the coordinates of a click in the iFrame with respect
to the parent? I'm not sure why you'd need that, anyhow below is a
script that does it.

You need to add the top/left position of the iFrame to the event
coordinates. Make sure your parent body margin and padding are
specifically set to some value (zero is good), because IE does not
include the default margin and padding when getting the location of
elements.


<script type="text/javascript">

function mike_test(event)
{
var iFramePos = elPos(document.getElementById('my_iframe1'));
var eventPos = {x:event.clientX, y:event.clientY};

alert(
'Event: ' + event.type
+ '\nCo-ords in iFrame: ' + eventPos.x + ', ' + eventPos.y
+ '\nCo-ords in parent: '
+ (eventPos.x + iFramePos.x) + ', '
+ (eventPos.y + iFramePos.y)
);

}

function elPos(el){
var pos = {x:0, y:0};
if (el.offsetParent) {
while (el.offsetParent) {
pos.x += el.offsetLeft;
pos.y += el.offsetTop;
el = el.offsetParent;
}
} else if (el.x){
pos.x = el.x;
pos.y = el.y;
}
return pos;
}
</script>

 

[mike]

Rob,

Are you saying that your solution about will give me that coordinates
of the iframe in relation to the top of the document?

Mike

 

[RobG]

Rob,

Are you saying that your solution about will give me that coordinates
of the iframe in relation to the top of the document?

Yes, the elPos() function does that. If your iFrame scrolls, you need
to account for that in the iFrame coordinates (I haven't) but the parent
ones are good. i.e. add the scroll to the iFrame co-ords only, keep the
parent co-ords as event co-ords plus iFrame offset.

Poke around <URL:http://www.quirksmode.org>.