获取发生鼠标单击的html元素？

Posted 2023-03-05

【中文标题】获取发生鼠标单击的html元素？

【英文标题】：Get html element in which a mouse click occurred?

【发布时间】：2011-07-08 02:05:46

【问题描述】：

在 javascript 中，我希望能够确定 html 页面中发生鼠标单击的元素。请注意，元素不会附加事件侦听器。

基本上：光标在页面某处，用户单击鼠标，捕获鼠标单击事件，获取发生单击的元素。这可能吗？

我想到的一种方法是获取点击事件的 x,y 坐标，遍历 DOM 获取每个元素的位置，然后找到包含点击事件的最里面的元素。不过听起来有点啰嗦——所以想知道是否还有其他方法。

【参考方案1】：

试试event.target。该页面上有一个示例说明如何使用它。

【讨论】：

也许最好链接到MDC's documentation，因为这与jQuery无关，可能会导致错误的结论。

我已经链接到 jQuery 示例，因为 event.target 在 IE 中不起作用，你需要 event.srcElement 那里。

【参考方案2】：

http://www.quirksmode.org 是一个非常不错的网站，它解释了很多关于事件的信息。

特别是针对您的问题：Event properties - Which HTML element is the target of the event?。

在 Internet Explorer 中，您可以使用 event.srcElement^[docs] 从 event 对象中获取元素，在所有其他浏览器中使用 event.target^[docs]。

另请参阅我链接到的示例中的“Safari 错误”解决方法（尽管我不知道它是否仍然存在和/或在哪个版本的 Safari 中）。

【讨论】：

谢谢，完美的答案，很好的参考。

不幸的是，这篇文章中的链接现在已损坏。

@Alistair：这是一个临时问题：twitter.com/ppk/status/648419502728835072