[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


Is this.getElement() Valid?

Posted on 2007-07-23
Medium Priority
Last Modified: 2012-08-14
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">
Question by:dignified

Expert Comment

ID: 19553580
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:


Author Comment

ID: 19553590
yeah, this will return a type of Object though. Alright so getElement() doesn't exist, very annoying.
LVL 11

Accepted Solution

BraveBrain earned 500 total points
ID: 19553596
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">
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 17

Expert Comment

ID: 19553608
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

Author Comment

ID: 19553638
I need to pass the element into a JSNI method to use with the Google Web Toolkit so I need an element datatype.

Author Comment

ID: 19562530
BraveBrain: Trying to implement your function but when I do an alert(evt) it is undefined.

Author Comment

ID: 19562733
Also, I'll say this is how I'm calling it:

            $wnd.__getElement = function (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())"
LVL 11

Expert Comment

ID: 19562784
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
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.

Author Comment

ID: 19562879
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?


Author Comment

ID: 19562892
Here is what 'this' returns:

I need:

Because this is just how the Google Web Toolkit works. To work at a lower level I need elements not objects unfortunately.

Author Comment

ID: 19562899
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.

Featured Post


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question