Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 141
  • Last Modified:

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

0
894359
Asked:
894359
  • 2
  • 2
1 Solution
 
Hans LangerCommented:
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

0
 
894359Author Commented:
HI,
I want this done as a listener and NOT using an onClick event.

Thanks!
0
 
Hans LangerCommented:
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

0
 
894359Author Commented:
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!
0
 
Slick812Commented:
greetings Number 894359, , you can use the javascript  document.addEventListener( ) to get response for the event you need, in this case for a click. You can try the code below -
<!DOCTYPE HTML>
<html><head><title>Click event</title>
<style>
body{margin:6px;background:#e3f7ff;}
</style>

<script>/* <![CDATA[ */
function getAtribute(e) {
var artt = e.target.getAttribute("data-analytics-tracking-name");
if (artt) alert("a click with TrackName= "+artt+", ID= "+e.target.id);
}

document.addEventListener("click", getAtribute, false);
/* ]]> */</script>
</head><body><h3 id="hhh" data-analytics-tracking-name="data-trak-top-H3">Document Click Event Listener</h3>
<img data-analytics-tracking-name="data-trak-art-bar" id="img3" src="images3/adebar.gif" alt="art bar">
<div style="color:#fff;background:#543;width:345px;padding:6px;border:2px solid #009;">Enter IP -
<input data-analytics-tracking-name="data-trak-input-ips" type="text" id="ips" value=""><br>
<input type="button" name="but1" value=" set Caller " style="margin-left:14px;">
<br>
</div>
<div style="color:#fff;background:#7bc;width:350px;padding:6px;border:2px solid #c09; margin:3px auto;">
  <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">third link</a><br />
  <a href="#" data-analytics-tracking-name="custom link 2 reported name" id="href-id4-track">last link</a>
</div><br />
</body></html>

Open in new window


Take note, that the  addEventListener( ) method IS NOT going to work the same in all browsers, but the click event is fairly standard, and IE browsers before 9, addEventListener( )  does not work at all.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now