Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Debugging step-by-step Jquery/Javascript 6 57
CSS Scroll Issue 3 85
jQuery Syntax 2 47
iframe detection of parent window scale 20 60
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

911 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

16 Experts available now in Live!

Get 1:1 Help Now