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">
dignifiedAsked:
Who is Participating?
 
BraveBrainConnect With a Mentor Commented:
this.getElement() is not valid.
Here's a little function to catch which element an event (i.e. mousedown) was invoked from:

function getElement(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;
}

<img onmousedown="parent.__cloneCallback('img', getElement())" src="http://www.google.com/intl/en_ALL/images/logo.gif">
0
 
ljubiccicaCommented:
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
0
 
dignifiedAuthor Commented:
yeah, this will return a type of Object though. Alright so getElement() doesn't exist, very annoying.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
gops1Commented:
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
0
 
dignifiedAuthor Commented:
I need to pass the element into a JSNI method to use with the Google Web Toolkit so I need an element datatype.
0
 
dignifiedAuthor Commented:
BraveBrain: Trying to implement your function but when I do an alert(evt) it is undefined.
0
 
dignifiedAuthor Commented:
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())"
0
 
BraveBrainCommented:
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.
0
 
dignifiedAuthor Commented:
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?

0
 
dignifiedAuthor Commented:
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.
0
 
dignifiedAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.