Track ALL clicked elements using JavaScript

Question

I want to track ALL elements that are clicked on a HTML-page. I need a good way to reference exactly which element was clicked (so I will be able to replay the clicks on a identical separate HTML-page later on).

Is there a good way to reference which element that was clicked?

I could add unique id's and classnames to every single element on the page. But I figure there must be another way?

The HTML-page which I will be replaying the clicks on will be identical.

Something like this (but more exact information which element it was, maybe that's possible to collect)...

Code to track which element was clicked

var arrayWithElements = new Array();

document.onclick = clickListener;

function clickListener(e) {
    var clickedElement;
    if(e == null) {
        clickedElement = event.srcElement;
    } else {
        clickedElement = e.target;
    }
    arrayWithElements.push(clickedElement)
    alert(arrayWithElements);
}

Code that will be used on a identical HTML-page

document.someHowGetTheElement().onclick();

Adding IDs to each element is probably the easiest way. You can add them with JavaScript as well. — Felix Kling, Mar 01 '12 at 01:10
What do you mean by "more exact information" , currently clickedElement will give you a reference to the node, I don't know what can be more exactly than this. — Dr.Molle, Mar 01 '12 at 01:12
@James: `this` will refer to `document`, not the clicked element. @Dr.Molle: He mentions to "replay" the events on another page. You cannot really persist or transfer references to DOM nodes. — Felix Kling, Mar 01 '12 at 01:14
Thanks DR.Molle. Let's say there are 100 nested divs and images. How would you know wich image that was clicked? Please help if you know how! :) — user1087110, Mar 01 '12 at 01:15
Thanks Felix Kling. You wouldn't perhaps know a good method to add ID to every element? eg. start on king1,king2,king3,king4 and so on ;D — user1087110, Mar 01 '12 at 01:18
@user1087110: Well, no two nodes are identical. If you have a reference to a node (`event.target`) you have the element. But it seems you want to use that information on another page in which case you have to serialize the reference somehow. As I said, IDs might be the easiest way. You could also generate the XPath for the node, but that could be more complicated to do across browsers. — Felix Kling, Mar 01 '12 at 01:21
Regarding IDs: Just have a counter and a prefix and iterate over all elements while increasing the counter. Whether this is a good approach depends on the number of elements though. — Felix Kling, Mar 01 '12 at 01:22
Thanks Felix :) Aproximatly how many elements will make this ID method into a "bad approach"? — user1087110, Mar 01 '12 at 01:27

Dr.Molle · Accepted Answer · 2012-03-01T02:23:53.790

22

I guess you are looking for something like this:

var arrayWithElements = new Array();

function clickListener(e) 
{   
    var clickedElement=(window.event)
                        ? window.event.srcElement
                        : e.target,
        tags=document.getElementsByTagName(clickedElement.tagName);

    for(var i=0;i<tags.length;++i)
    {
      if(tags[i]==clickedElement)
      {
        arrayWithElements.push({tag:clickedElement.tagName,index:i}); 
        console.log(arrayWithElements);
      }    
    }
}

document.onclick = clickListener;

It will store on every click an object that contains the tagName of the element and the index. So you may access this element in another "instance" of this document by using

document.getElementsByTagName(item.tag)[item.index]

(where item is an item of arrayWithElements)

Demo: http://jsfiddle.net/doktormolle/z2wds/

edited Mar 01 '12 at 02:23

answered Mar 01 '12 at 01:31

Dr.Molle

116,463
16
195
201

Impressed! I think that's exactly what I was looking for! Thank you so much :) – user1087110 Mar 01 '12 at 01:46
1

+1 Good idea. It might be worth caching the results of `getElementsByTagName`. – Felix Kling Mar 01 '12 at 01:55
Yes it does, I've applied the proposal – Dr.Molle Mar 01 '12 at 02:15

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You can use this related question. In other words, a good way to know which element was clicked without adding IDs all over the place is to use jquery's .cssSelectorAsString() method. For example:

function clickListener(e) {
    var clickedElement;
    if(e == null) {
        clickedElement = event.srcElement;
    } else {
        clickedElement = e.target;
    }
    arrayWithElements.push($(clickedElement).cssSelectorAsString()); // <====
    alert(arrayWithElements);
}

See also: Get unique selector of element in Jquery

edited May 23 '17 at 12:16

Community

1
1

answered Mar 01 '12 at 01:16

Diego

18,035
5
62
66

I'm not using jquery (forgot to mention). But I will look into the xPath mentod! Thanks! – user1087110 Mar 01 '12 at 01:31

Track ALL clicked elements using JavaScript

2 Answers2

Linked