Question

我不确定如何正确地提出这个问题，因为我对DOM的理解不足。

我要做的是捕获任何给定DOM元素上的任何click事件。然后我想保存元素类型以及对数据库中元素的完整引用。但我不确定这是不可能的？

我想要实现的是以某种方式保存与网络应用的漏洞互动，以便您稍后可以在给定的会话中重播在网站上执行的每项操作。

我尝试过不同的方法，例如获取被点击元素的X和Y位置，然后触发点击那些x-y坐标，但这种方法有几个问题。我也试图向后穿过Dom，直到我到达身体标签，建立一个不受欢迎的选择器，但这也有它的缺点..我能想到的最好的解决方案是保存$（this）包含的东西。

Answer 1

如果您想要跟踪点击事件，您可能希望将点击事件处理程序添加到页面上的每个可点击元素。

这需要从<body>开始并走DOM，随时添加处理程序。

同时，我将为包含XPath选择器的每个元素添加一个新的data-xpath属性，以便您可以在处理程序中使用它来记录被单击的元素，从而重放用户的交互。 / p>

有关XPath的介绍，请参阅http://www.w3schools.com/xpath/xpath_intro.asp。

Answer 2

昨天睡了一觉我得到了一个想法，今天结束了这段代码。 - 它按预期工作，但我猜测Xpath会表现更好！？

$(document).click(function(event) {
    var target = $(event.target);
    var parents = target.parents();
    var myParents = '';
    $($(parents).get().reverse()).each(function(key, value){
        var parentIndex = $(this).index()+1;
        myParents += $(this).prop("tagName")+':NTH-CHILD('+parentIndex+') > '; 
    });
    var childIndex = target.index()+1;
    var childTag = target.get(0).tagName;
    myParents += childTag+':NTH-CHILD('+childIndex+')';
    alert(myParents);
});

上面的代码将返回一个唯一的选择器字符串，如下所示：

HTML:NTH-CHILD(1) > BODY:NTH-CHILD(2) > SECTION:NTH-CHILD(1) > UL:NTH-CHILD(1) > LI:NTH-CHILD(3) > A:NTH-CHILD(1)

将引用$（this）保存到DB

2 个答案: