使用JavaScript跟踪所有单击的元素

Question

我想跟踪在HTML页面上单击的所有元素.我需要一个很好的方法来引用完全被点击的元素(所以我将能够在稍后重播相同的单独HTML页面上的点击).

有没有一个很好的方法来引用被点击的元素？

我可以为页面上的每个元素添加唯一的id和类名.但我认为必须有一个更合适的方式？

我将重播点击的HTML页面将是相同的.

有点精简(但更准确的信息是它的元素,也许可以收集)......

用于跟踪被点击的元素的代码

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

将在相同的HTML页面上使用的代码

document.someHowGetTheElement().onclick();

Answer 1

我想你正在寻找这样的东西:

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;

它将在每次单击时存储包含元素的tagName和索引的对象.因此,您可以使用在本文档的另一个"实例"中访问此元素

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

(其中item是arrayWithElements的项目)

演示:http://jsfiddle.net/doktormolle/z2wds/