Solved

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

Posted on 2014-11-23
5
120 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 34

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

679 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