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/

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

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

2 个答案: