Link to home
Start Free TrialLog in
Avatar of MJ
MJFlag 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

Avatar of Hans Langer
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

Avatar of MJ

ASKER

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

Thanks!
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

Avatar of 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
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial