Question

所以如果有人点击了一个链接（原谅玉）：

div
 ul
  li
    a(href="/foo") Bar
  li
    a(href="/baz") Foo

假设我点击了"Bar"的链接，如何以编程方式找到DOM中点击的节点？我可以使用像tagName + innerHtml之类的启发式，但DOM本身是否必须有某种方法来识别我以后可以用普通的javascript / jquery查询的元素？

编辑：请我们必须假设我们没有先验知道点击的内容，但点击发生后我们确实有一个事件对象。是否event.target.something是唯一的？然后我可以说（在jquery中）$(event.target.something)并正确选择正确的元素吗？

Answer 1

如果您处理click事件，您将获得此变量中的元素。您可以将其存储在本地甚至全局变量中以保持对它的引用。像这样的东西：

在事件处理程序之外，可能是在加载页面时：

var lastClickedElement;

然后在click事件处理程序中：

function() {
    lastClickedElement = this;
}

然后你总是引用最后点击的元素。

Answer 2

我不确定你的意思是什么“稍后查询” - 即，你想什么时候查询，你打算用什么元素？如果您想在同一个HTML页面中访问被点击的元素（假设点击不会导致另一个页面），您可以使用点击处理程序中的this关键字来检索点击的元素，然后将其存储在稍后可以访问的变量中。

但是，如果您想保留点击元素的某种记录以供将来使用（例如，在Selenium测试用例中确定要点击的元素），您可以通过Xpath唯一地标识HTML页面中的元素，假设DOM不会一直改变。例如，你可以做这样的事情

$("a").click(function() {
    var theClickedElement = $(this);
    getXpath(theClickedElement); //Display the return value of this somewhere
}

您可以使用与this answer类似的东西来实现getXpath（）（链接中的代码计算相对Xpath - 您还可以获得仅包含标记名称的绝对Xpath。有关XPath的更多信息，请检查出this tutorial

Answer 3

我不确定我是否理解你想要做什么，但你可以通过事件监听器轻松找到被点击的元素，并随心所欲地做任何事情：

$('a').click(function (e) {
    e.preventDefault();
    // ... Now 'this' refers to the element clicked
});

传递的e变量是一个jQuery事件，其中包含有关所单击元素的所有信息。 e.target是DOM节点，如果您绝对需要，可以使用它自己创建唯一标识符。

Answer 4

只需按住已单击的元素并将其存储即可。这将有助于您稍后检索它而无需显式定义id属性。

HTML：

<a href="#a">Bar</a>
<a href="#b">Foo</a>

javaScript：

var clickedNode = [];
var counter = 0;

$("a").click(function(){
    clickedNode[counter] = $(this);
    alert(clickedNode[counter].text());
     counter++;
});


$("#lastValueButton").click(function(){
    alert(clickedNode[counter-1].text());
});

Demo

Answer 5

作为标题问题的答案：

关注到manual，您可以通过它找到链接，如下所示：

$('a[href="/baz"]')

您还可以找到包含一些文字（manual）

的元素

$("a:contains('Bar')")

有没有办法获得未标记为显式id属性的html元素的唯一id / key？

5 个答案: