使用 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;

---

它将在每次点击时存储一个包含元素标签名和索引的对象。 因此，您可以使用

在本文档的另一个“实例”中访问此元素

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

（其中 item 是 arrayWithElements 的一项）

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

Answer 2

您可以使用this related question。换句话说，在不到处添加 ID 的情况下知道单击了哪个元素的好方法是使用 jquery 的 .cssSelectorAsString() 方法。例如：

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

另见：Get unique selector of element in Jquery