|  | Get id of clicked url |  | |
| | | Chris |  |
| Posted: Sun Aug 31, 2008 11:19 am Post subject: Get id of clicked url |  |
I'm sure this is simple and involves 'this' but my javascript powers are not too hot.
From the url below how do I pick up the url's id in the function taking into consideration this could be one of many urls?
<a href="javascript:void(0)" onclick="foo()" id="bar">
I thought this might have worked but it doesn't...
foo { str = this.GetElementById }
Cheers,
Chris |
| |
| | | MikeB |  |
| Posted: Sun Aug 31, 2008 12:44 pm Post subject: Re: Get id of clicked url |  |
"Chris" <matchett123@googlemail.com> wrote in message news:94efedb1-adb8-48c6-9118-48b7ed653b06@l42g2000hsc.googlegroups.com...
| Quote: | I'm sure this is simple and involves 'this' but my javascript powers are not too hot.
From the url below how do I pick up the url's id in the function taking into consideration this could be one of many urls?
a href="javascript:void(0)" onclick="foo()" id="bar"
I thought this might have worked but it doesn't...
foo { str = this.GetElementById }
|
window.event.srcElement.id;
|
| |
| | | Chris |  |
| Posted: Sun Aug 31, 2008 3:32 pm Post subject: Re: Get id of clicked url |  |
On 31 Aug, 15:44, "MikeB" <m.byerleyATVerizonDottieNettie> wrote:
| Quote: | "Chris" <matchett...@googlemail.com> wrote in message
news:94efedb1-adb8-48c6-9118-48b7ed653b06@l42g2000hsc.googlegroups.com...
I'm sure this is simple and involves 'this' but my javascript powers are not too hot.
From the url below how do I pick up the url's id in the function taking into consideration this could be one of many urls?
a href="javascript:void(0)" onclick="foo()" id="bar"
I thought this might have worked but it doesn't...
foo { str = this.GetElementById }
window.event.srcElement.id;
Cheers,
Chris
|
Thanks Mike.
Chris |
| |
| | | Thomas 'PointedEars' Lahn |  |
| Posted: Sun Aug 31, 2008 10:05 pm Post subject: Re: Get id of clicked url |  |
| |  | |
Chris wrote:
| Quote: | On 31 Aug, 15:44, "MikeB" <m.byerleyATVerizonDottieNettie> wrote: "Chris" <matchett...@googlemail.com> wrote in message: I'm sure this is simple and involves 'this' but my javascript powers are not too hot. From the url below how do I pick up the url's id in the function taking into consideration this could be one of many urls? a href="javascript:void(0)" onclick="foo()" id="bar"
|
Don't. <http://jibbering.com/faq/#FAQ4_42>
| Quote: | I thought this might have worked but it doesn't... foo { str = this.GetElementById
|
This cannot work. It is syntactically invalid (the identifier MUST be preceded by the `function' keyword, and followed by a list of named arguments, even if that is empty), pointless (`this' refers to the Global Object in a globally called method, not the object handling the event), error-prone (`str' was not declared a variable), and simply wrong even if the correct object was being referred to (ECMAScript implementations are case-sensitive, the method identifier is `getElementById', and it would not be called, but referenced, here because the argument list was missing.)
| Quote: | } window.event.srcElement.id;
|
That is IE-proprietary, and therefore nonsense in this general context. The (so far) interoperable approach is the obvious one (which includes proper syntax):
function foo(o) { var str = o.id; }
<a href="..." onclick="foo(this)" id="bar">
However, it is likely then that you don't need the ID anymore as you have the object element reference with `o' already.
Please RTFFAQ and RTFM before you post here again.
My name is not Mike, but you are welcome, I think.
PointedEars -- Use any version of Microsoft Frontpage to create your site. (This won't prevent people from viewing your source, but no one will want to steal it.) -- from <http://www.vortex-webdesign.com/help/hidesource.htm> |
| |
| | | Arun |  |
| Posted: Mon Sep 01, 2008 3:05 pm Post subject: Re: Get id of clicked url |  |
| |  | |
On Aug 31, 3:44 pm, "MikeB" <m.byerleyATVerizonDottieNettie> wrote:
| Quote: | "Chris" <matchett...@googlemail.com> wrote in message
news:94efedb1-adb8-48c6-9118-48b7ed653b06@l42g2000hsc.googlegroups.com...
I'm sure this is simple and involves 'this' but my javascript powers are not too hot.
From the url below how do I pick up the url's id in the function taking into consideration this could be one of many urls?
a href="javascript:void(0)" onclick="foo()" id="bar"
I thought this might have worked but it doesn't...
foo { str = this.GetElementById }
window.event.srcElement.id;
Cheers,
Chris
|
Remember, window.event only works on Internet Explorer versions 5.0 onwards. What you need is a simple cross-browser solution like the following:
function foo(e) { var sourceElm = (e.target) ? e.target : window.event.srcElement; alert(sourceElm.id); }
...where e is passed as an object of window.event in IE, but in Firefox, it is passed as an implicit event object. IE uses the window.event.srcElement routine to get to the calling object, but in EOMB (every other modern browser), e.target is used to retrieve the calling object.
You will call the above method simply like this:
<a id="bar" href="javascript:void(0);" onclick="foo(event)">Click me</a>
Cheers, Arun |
| |
| | | MikeB |  |
| Posted: Tue Sep 02, 2008 1:04 am Post subject: Re: Get id of clicked url |  |
| |  | |
"Arun" <a.reginald@gmail.com> wrote in message news:c4d1e1a5-8bb3-4c2c-9877-11d57973c00f@p25g2000hsf.googlegroups.com... On Aug 31, 3:44 pm, "MikeB" <m.byerleyATVerizonDottieNettie> wrote:
| Quote: | "Chris" <matchett...@googlemail.com> wrote in message
news:94efedb1-adb8-48c6-9118-48b7ed653b06@l42g2000hsc.googlegroups.com...
I'm sure this is simple and involves 'this' but my javascript powers are not too hot.
From the url below how do I pick up the url's id in the function taking into consideration this could be one of many urls?
a href="javascript:void(0)" onclick="foo()" id="bar"
I thought this might have worked but it doesn't...
foo { str = this.GetElementById }
window.event.srcElement.id;
Cheers,
Chris
|
Remember, window.event only works on Internet Explorer versions 5.0 onwards. What you need is a simple cross-browser solution like the following:
function foo(e) { var sourceElm = (e.target) ? e.target : window.event.srcElement; alert(sourceElm.id); }
Thanks for this. I don't do much browser scripting, but I did know of the IE solution.
| Quote: | ...where e is passed as an object of window.event in IE, but in |
Firefox, it is passed as an implicit event object. IE uses the window.event.srcElement routine to get to the calling object, but in EOMB (every other modern browser), e.target is used to retrieve the calling object.
You will call the above method simply like this:
<a id="bar" href="javascript:void(0);" onclick="foo(event)">Click me</a>
Cheers, Arun |
| |
| | | RobG |  |
| Posted: Tue Sep 02, 2008 3:58 am Post subject: Re: Get id of clicked url |  |
| |  | |
On Sep 2, 1:05 am, Arun <a.regin...@gmail.com> wrote: [...]
| Quote: | Remember, window.event only works on Internet Explorer versions 5.0 onwards. What you need is a simple cross-browser solution like the following:
function foo(e) { var sourceElm = (e.target) ? e.target : window.event.srcElement; alert(sourceElm.id); }
|
Given your code below, e is a reference to window.event in IE already. The usual pattern here is:
function foo(e) { var e = e || window.event; var tgt = e.target || e.srcElement;
/* do stuff with e and tgt */
}
Noting that tgt will be reference to the element that initiated the event, which is not necessarily the element that has the listener (consider a bubbling event from a span inside the A element).
[...]
| Quote: | ..where e is passed as an object of window.event in IE, but in Firefox, it is passed as an implicit event object. IE uses the window.event.srcElement routine to get to the calling object, but in EOMB (every other modern browser), e.target is used to retrieve the calling object.
You will call the above method simply like this:
<a id="bar" href="javascript:void(0);" onclick="foo(event)">Click me</a
|
Put something meaningful in the href attribute or replace the A element with something more appropriate (a button or styled span maybe).
The onclick listener should return false if the link should not be followed:
<a href="usefulLink.html" onclick="return foo(event);"> ... </a>
and within foo:
function foo(e) { if (...) { /* all OK, don't follow the link */ return false; } else { ... } }
The use of event as an argument to the call to foo means that both in common event models a reference to the event object will be passed to foo. It is the only way to get a reference to the event object from an inline listener in browsers that don't implement window.event.
In any case, as suggested by Thomas, the simplest solution is to have the listener pass a reference to the element using the this keyword:
<a ... onclick="return foo(this);"> ... </a>
and:
function foo(el) { /* el is a reference to the node that called foo */ }
So el will be a reference to the element that has the listener, regardless of the source or target element.
-- Rob |
| |
|
|