Avatar of MJ
MJ
Flag for United States of America asked on

How to listen for click on element and read particular HTML-5 custom attribute?

I want to detect when ANY element is clicked and if that element has a specific HTML-5 custom attribute. If it does have that particular custom attribute then read the HTML-5 custom attribute from that element. ***Need this to work in IE8 and not use jQuery***. Not sure how I would do this? The custom attribute will be the same name for many of the elements on a single page. For example, 2 elements below use "data-analytics-tracking-name"
	<a href="#" id="href-id">test href NOT using - tracking</a><br />
	<a href="#" data-analytics-tracking-name="custom link 1 reported name" id="href-id2-track">test href using - tracking</a><br />
	<a href="#" id="href-id3"><img id="href-id3b" src="http://www.ex-premie.org/gallery/lyrics/Silver-Play-Button_small.jpg"></a><br />
	<a href="#" data-analytics-tracking-name="custom link 2 reported name" id="href-id4-track"><img id="href-id4b-track" src="http://www.ex-premie.org/gallery/lyrics/Silver-Play-Button_small.jpg"></a><br />
	

Open in new window

JavaScript

Avatar of undefined
Last Comment
Member_2_248744

8/22/2022 - Mon
Hans Langer

this should work:

- You will need to add the listener "onclick" for those "a" tags, and call a function with its "id"
- "this" value doesnt work on "a" tags.
- you can use:   document.getElementsByTagName('a')  to modify the archor programatically


<a id="href-id2-track" href="#" onclick="getClick('href-id2-track')" data-analytics-tracking-name="custom link 1 reported name">test href using - tracking</a>	

Open in new window



function getClick(id){
var myAttr = document.getElementById(id).attributes['data-analytics-tracking-name']

if(!myAttr==undefined)
   alert(myAttr.value)
};
}

Open in new window

MJ

ASKER
HI,
I want this done as a listener and NOT using an onClick event.

Thanks!
Hans Langer

then, as i say, just use:

var a = document.getElementsByTagName('a');
for (var idx= 0; idx < a.length; ++idx){
    var sid = a[idx].id
    document.getElementById(sid ).onclick=function(){getClick(this.id)}
}

Open in new window

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
MJ

ASKER
Hi  Gerente,
What if it isn't an "a" tag and some other type of element? I'm looking for something that listens to any click and then determines if that element has a custom attribute and reads it.

Thanks!
ASKER CERTIFIED SOLUTION
Member_2_248744

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question