Link to home
Start Free TrialLog in
Avatar of dignified
dignified

asked on

Is this.getElement() Valid?

I'm looking to get the element of an object onmousedown. Is there any way to do this? Doesn't look like this is working...

<img onmousedown="alert(this.getElement()); parent.__cloneCallback('img', this.getElement())" src="http://www.google.com/intl/en_ALL/images/logo.gif">
Avatar of ljubiccica
ljubiccica
Flag of Slovenia image

I'm not sure I completely understand what you need to do, but you should use this like this:

parent.__cloneCallback('img', this)

When you want to use getElement... you have 2 options:
getElementByID or getElementByName

A link where you can find how to use this in js:
http://www.quirksmode.org/js/this.html

Greets
Ljubiccica
Avatar of dignified
dignified

ASKER

yeah, this will return a type of Object though. Alright so getElement() doesn't exist, very annoying.
ASKER CERTIFIED SOLUTION
Avatar of BraveBrain
BraveBrain
Flag of Norway image

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
you just need "this" to get the element what you have clicked, and if you need to pass the tagname then do like this:

<img onmousedown="alert(this.tagName); parent.__cloneCallback('img', this.tagName)" src="http://www.google.com/intl/en_ALL/images/logo.gif">

if you just the element to be passed then remove .tagName

But tell us first what exactly you require
I need to pass the element into a JSNI method to use with the Google Web Toolkit so I need an element datatype.
BraveBrain: Trying to implement your function but when I do an alert(evt) it is undefined.
Also, I'll say this is how I'm calling it:

            $wnd.__getElement = function (evt) {
                  $wnd.alert(evt);
                    evt = evt || event; // get the event: evt from function for W3C DOM, property event for IE
                    elm = evt.target || evt.srcElement; // get the element: target for W3C DOM, srcElement for IE
                    return elm;
            }

$wnd just gets the appropriate window object.

then in the frame src:

      <img onmousedown="parent.__cloneCallback(this.tagName, parent.__getElement())"
You're trying to alert(evt) before it's set. Should be at least one line further down.

That said, I noticed FF had some problems with it when used like that (inline event handler onmousedown), while IE still managed to make it work.
Seems FF likes to get the event handlers set up like
referenceToElement.event = function(params) { ... }
to get the events passed through the function, i.e.
document.getElementById('myElement').onclick = function(evt) { ... }

As stated by ljubiccica and gops1 though, in your example
this
is enough (and better), as it refers to the element that was clicked. So does my getElement() function but obviously not in FF in this case...

If you try clicking on the image from the code below you'll see that it returns the whole element, and even with attributes that is not set in the tag (width and height in this case):
<img title="Google Logo" onmousedown='alert(this+"\n"+this.src+"\n"+this.width+"x"+this.height+"\n"+this.title); return false;' src="http://www.google.com/intl/en_ALL/images/logo.gif">

What exactly do you need to pass through your function?
I'm pretty sure the various properties of the object returned from using 'this' will contain whatever you need.
Even when I move the alert(evt) down a line, it is still undefined.

When I pass in 'this', it is of type JavaScriptObject, which I don't want. The original code you posted actually returns a correct Element datatype.

In the Google Web Toolkit Element is a Java subclass of JavaScriptObject but you can't downcast so I need .

When I use your original function, it returns the correct Element datatype I need. I did get it working by placing the getElement() function inside my frame, but I don't want to have to put it there, I want to instead put it in the parent document using $wnd.__getElement = function (evt) { like I said before.

I know this seems like a bad way to do things but GWT is a little bit limited sometimes and what I'm doing is actually a workaround for what seems to be a bug.

I'm guessing this isn't working becuase the window.event will only bubble up to the iframe object, not to the iframe's parent?

Here is what 'this' returns:
http://code.google.com/webtoolkit/documentation/com.google.gwt.core.client.JavaScriptObject.html

I need:
http://code.google.com/webtoolkit/documentation/com.google.gwt.user.client.Element.html

Because this is just how the Google Web Toolkit works. To work at a lower level I need elements not objects unfortunately.
Also, I'd like to make it so that I don't need to have an inline onmousedown="" inside the img tag. I'd like to just be able to assign a global onmousedown to all objects in the iframe.