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();

Solution 1

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/

Solution 2

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

Comments

[user1087110]

I'm not using jquery (forgot to mention). But I will look into the xPath mentod! Thanks!

[user1087110]

Impressed! I think that's exactly what I was looking for! Thank you so much :)

[Felix Kling]

+1 Good idea. It might be worth caching the results of getElementsByTagName.

[Dr.Molle]

Yes it does, I've applied the proposal