Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    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
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,441
    Thanks
    76
    Thanked 4,372 Times in 4,337 Posts
    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.

  • Users who have thanked Old Pedant for this post:

    anotherJEK (03-23-2012)

  • #3
    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
    215
    Thanks
    52
    Thanked 1 Time in 1 Post

    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

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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
    Last edited by felgall; 03-24-2012 at 09:40 AM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,280
    Thanks
    12
    Thanked 343 Times in 339 Posts
    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.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •