Solved

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

Posted on 2014-11-23
5
104 Views
Last Modified: 2014-11-25
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
Comment
Question by:894359
  • 2
  • 2
5 Comments
 
LVL 10

Expert Comment

by:Hans Langer
ID: 40463024
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
 

Author Comment

by:894359
ID: 40463121
HI,
I want this done as a listener and NOT using an onClick event.

Thanks!
0
 
LVL 10

Expert Comment

by:Hans Langer
ID: 40463311
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
 

Author Comment

by:894359
ID: 40463332
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 40463621
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now