将引用$（this）保存到DB

Question

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

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

我想要实现的是以某种方式保存与Web应用程序的漏洞交互，以便您稍后可以在给定会话中重放在站点上执行的每个操作。

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

Answer 1

如果单击事件是您要跟踪的唯一事件，则可能需要将click事件处理程序添加到页面上的每个可单击元素。

这将需要从<body>并遍历DOM，随时添加处理程序。

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

有关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)