Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-23-2012, 08:35 PM   PM User | #1
anotherJEK
Regular Coder

 
Join Date: Aug 2010
Location: Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
Posts: 152
Thanks: 41
Thanked 1 Time in 1 Post
anotherJEK is an unknown quantity at this point
reference to event target element parent

Hello;
I have a situation where an image tag is nested in an anchor tag set.
The anchor is assigned an id and is assigned a click/onclick event listener.
The anchor id corresponds to a list of objects in an array.

In practice, the image tag is receiving the event. The code does setAttribute in another elements img tag src attribute.

The image tag receiving the click event, (and passing it to the anchor tag)
is event.target. (or event.srcElement, in the case of I.E.)

My Question:
What I want to know is how to reference the event.target
parent element, the anchor tag elements Id attribute.

Code:
sample anchor/img tag set:
<a style="font-family:Arial, Helvetica, sans-serif;color:#cccccc" id="An 1" alt="An 1" href="javascript:"><img style="border:1px solid;border-color:#cccccc" src="WC_port/windows/img//an_1.jpg" width="100"  height="131" /><br /><br />An 1</a>
I see the double slash in the img src path attribute. It is working as is
in test browser: Firefox ( so far)

This is in development stages. Later, I will assign the elements a css class
rule.

in my code, event.target.src has a usable value (src attribute of the img tag)
It does not have a usable value for event.target.id (id attribute of the anchor tag)

I am doing it this way so in the absence of javascript, the anchors href
attribute defaults to a non scripted value.

Thank you for time and attention
JK

Last edited by anotherJEK; 03-23-2012 at 08:37 PM..
anotherJEK is offline   Reply With Quote
Old 03-23-2012, 09:39 PM   PM User | #2
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,200
Thanks: 59
Thanked 3,996 Times in 3,965 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
event.target.parentNode
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote
Users who have thanked Old Pedant for this post:
anotherJEK (03-23-2012)
Old 03-23-2012, 10:05 PM   PM User | #3
anotherJEK
Regular Coder

 
Join Date: Aug 2010
Location: Now Southern Oregon. I was born and had lived my life in Los Angeles until relocating last year (2010)
Posts: 152
Thanks: 41
Thanked 1 Time in 1 Post
anotherJEK is an unknown quantity at this point
Thank you

Thanks for the reply.

It also occurred to me that I can assign the id to the image tag, so
the event is registered on the image tag directly. But this still useful
because in the absence of javascript I can assign the default href
value (via php processing). If javascript is functional, it can reassign
the parentNode href attribute value.

JK
anotherJEK is offline   Reply With Quote
Old 03-24-2012, 09:38 AM   PM User | #4
felgall
Master Coder

 
felgall's Avatar
 
Join Date: Sep 2005
Location: Sydney, Australia
Posts: 5,452
Thanks: 0
Thanked 498 Times in 490 Posts
felgall is a jewel in the roughfelgall is a jewel in the roughfelgall is a jewel in the rough
You don't need anything on the tag itself to be able to reference it from JavaScript if it was the element that triggered the event currently being processed. The following code will return the tag regardless of which browser is being used since Internet Explorer stores the event differently and stores the element in srcElement instead of target (it also contains the code so that if it was a text node that triggered the event that it gets the parent tag so if the text in an <a> tag triggered the event a reference to the <a> tag is returned):

Code:
whichElement = function(e) {
var targ;
targ = (window.event) ? window.event.srcElement : e.target;
if (3===targ.nodeType) {
 targ = targ.parentNode;
}
return targ;
};
With an <img> tag triggering the event you'd need to get the parentNode of the <img> in order to get to the <a>

Code:
whichElement(e).parentNode
__________________
Stephen
Learn Modern JavaScript - http://javascriptexample.net/
Helping others to solve their computer problem at http://www.felgall.com/

Last edited by felgall; 03-24-2012 at 09:40 AM..
felgall is offline   Reply With Quote
Old 03-24-2012, 10:36 AM   PM User | #5
Dormilich
Senior Coder

 
Dormilich's Avatar
 
Join Date: Jan 2010
Location: Behind the Wall
Posts: 2,872
Thanks: 9
Thanked 291 Times in 287 Posts
Dormilich is on a distinguished road
modern browsers (not IE, of course) also have the Event.currentTarget property.

Another possibility would be to get the current Element via this, unless you use IE’s unmodified attachEvent() listener. though any sensible cross-browser event handler should solve that IE-issue.
__________________
please post your code wrapped in [CODE] [/CODE] tags
Dormilich is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:57 PM.


Advertisement
Log in to turn off these ads.