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

Posted 2023-02-18

【中文标题】使用 JavaScript 跟踪所有点击的元素

【英文标题】：Track ALL clicked elements using JavaScript

【发布时间】：2012-03-19 12:51:26

【问题描述】：

我想跟踪在 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();

【问题讨论】：

为每个元素添加 ID 可能是最简单的方法。您也可以使用 javascript 添加它们。

你说的“更准确的信息”是什么意思，目前clickedElement会给你一个节点的引用，不知道还有什么比这个更准确的。

@James: this 将引用document，而不是点击的元素。 @Dr.Molle：他提到要在另一页上“重播”这些事件。你不能真正持久化或转移对 DOM 节点的引用。

感谢 DR.Molle。假设有 100 个嵌套的 div 和图像。你怎么知道被点击的图片？如果你知道怎么做，请帮忙！ :)

谢谢菲利克斯克林。您可能不知道将 ID 添加到每个元素的好方法吗？例如。从 king1、king2、king3、king4 等开始；D

【参考方案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/

【讨论】：

印象深刻！我想这正是我想要的！非常感谢:)

+1 好主意。可能值得缓存getElementsByTagName 的结果。

是的，我已经应用了提案

【参考方案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

【讨论】：

我没有使用 jquery（忘了提）。但我会研究 xPath mentod！谢谢！