如何获得所有点击点上的元素列表？ [英] How to get a list of all elements that resides at the clicked point?
问题描述
在用户点击时，我希望获得所有点击元素的列表。
例如，如果用户点击 Hello 这里： < div>< span>你好<跨度>< / DIV>
我想得到以下清单：
< span> 元素< body> 元素$ c>< html> 元素获取这些元素最简单的方法是什么？ / p>
编辑：基于澄清，我认为这就是你的意思： b
$ b
编辑：正如 @Misha 指出的那样， outerWidth（）和应使用 outerHeight（）来代替 width（）和 height（） code>以获得准确的范围。
点击应该放在文档上，因为它 更高效。即使其他一些点击处理程序可以防止冒泡，您仍然应该在文档中使用点击 ，并将其与那些防止冒泡的处理程序分开处理。 示例： http://jsfiddle.net/57bVR/3/
<$ p $ （e）{
var clickX = e.pageX
，clickY = e.pageY
，list
，$ list
，offset
，范围
，$ body = $（'body'）。parents（）。andSelf（）;
$ list = $ （'body *'）。filter（function（）{
offset = $（this）.offset（）;
range = {
x：[offset.left，
offset .left + $（this）.outerWidth（）]，
y：[offset.top，
offset.top + $（this）.outerHeight（）]
};
返回（clickX> = range.x [0]&&&& clickX< = range .x [1]）&& （clickY> = range.y [0]&&& clickY< = range.y [1]）$ b $ b}）;
$ list = $ list.add（$ body）;
$ b $ list = $ list.map（function（）{
return this.nodeName +''+ this.className
}）。get（）;
alert（list）;
返回false;
））;
原始答案：
这会为您提供一个包含范围的标签名称数组。无法确定这是否是您想要的。
它使用 .parents（） 以及 .andSelf（） 来获取元素，然后使用 .map（） 与 .get（） 创建数组。
示例： http://jsfiddle.net/9cFTG/
var list;
$ b $（'span'）。click（function（）{
list = $（this）.parents（）。andSelf（）。map（function（）{
返回this.nodeName;
））。get（）;
alert（list）;
}）;
如果您只是想要元素，而不是标签名称，请删除 .map（）和获得（）。
或者，如果您想使用某种分隔符将数组连接到字符串，只需添加 .join（） .get（）之后，将分隔符放在引号内。
On user click I would like to get a list of all elements that resides at the clicked point.
For example, if user clicks on Hello here:
<div><span>Hello<span></div>
I would like to get the following list:
<span>element<div>element<body>element<html>element
What would be the easiest method to get these elements ?
EDIT: Based on clarification, I think this is what you mean:
EDIT: As pointed out by @Misha, outerWidth() and outerHeight() should be used in lieu of width() and height() in order to get an accurate range.
Also, if there's nothing to prevent event bubbling on the page, then the click should be placed on the document as it will be much more efficient. Even if some other click handler prevents bubbling, you should still have the click on the document, and just handle it separately from those handler that prevent bubbling.
Example: http://jsfiddle.net/57bVR/3/
$(document).click(function(e) {
var clickX = e.pageX
,clickY = e.pageY
,list
,$list
,offset
,range
,$body = $('body').parents().andSelf();
$list = $('body *').filter(function() {
offset = $(this).offset();
range = {
x: [ offset.left,
offset.left + $(this).outerWidth() ],
y: [ offset.top,
offset.top + $(this).outerHeight() ]
};
return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])
});
$list = $list.add($body);
list = $list.map(function() {
return this.nodeName + ' ' + this.className
}).get();
alert(list);
return false;
});
Original answer:
This will give you an Array of the tag names including the span. Couldn't quite tell if this is what you wanted.
It uses .parents() along with .andSelf() to get the elements, then uses .map() with .get() to create the Array.
Example: http://jsfiddle.net/9cFTG/
var list;
$('span').click(function() {
list = $(this).parents().andSelf().map(function() {
return this.nodeName;
}).get();
alert(list);
});
If you just wanted the elements, not the tag names, get rid of .map() and .get().
Or if you wanted to join the Array into a String using some sort of separator, just add .join(" ") after .get(), placing your separator inside the quotes.
这篇关于如何获得所有点击点上的元素列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
