Question

在用户点击时，我想获得所有在点击的位置的元素的列表。

例如，如果用户点击此处Hello：

<div><span>Hello<span></div>

我想得到以下列表：

<span>元素

<div>元素

<body>元素

<html>元素

获取这些元素最简单的方法是什么？

Answer 1

编辑：根据澄清，我认为这就是您的意思：

编辑：正如 @Misha 指出的那样，outerWidth()和outerHeight()应该用来代替width()和{ {1}}以获得准确的height()。

此外，如果没有什么可以阻止页面上的事件冒泡，那么range应放在click上，因为它将更多更高效。即使某个其他document处理程序阻止了冒泡，您仍然应该在click上使用click，并且只是从那些阻止冒泡的处理程序中单独处理它。

示例： http://jsfiddle.net/57bVR/3/

document

原始回答：

这将为您提供包含范围的标签名称数组。无法确定这是否是你想要的。

它使用.parents()和.andSelf()来获取元素，然后使用.map()和.get()来创建数组。

示例： http://jsfiddle.net/9cFTG/

$(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;
});

如果您只是想要元素而不是标记名称，请删除var list; $('span').click(function() { list = $(this).parents().andSelf().map(function() { return this.nodeName; }).get(); alert(list); });和.map()。

或者如果您想使用某种分隔符将Array加入String，只需在.get()之后添加.join(" ")，将分隔符放在引号内。

Answer 2

在未来附近，这应该是可能的：

$(document).click(function(e) {
    var family = this.elementsFromPoint(e.pageX, e.pageY);
    $(family).each( function () {
            console.log(child);
    });
});

更新2019年
目前在编辑草稿中：
的 Elements from point

Answer 3

jQuery parents()函数可以为您完成此任务。

将点击事件附加到所有span代码，例如：

$("span").click(function() {
    var parents = "";
    $(this).parents().map(function () {
        parents = parents + " " + this.tagName;
    })
    alert(parents);
});

Answer 4

使用parent方法递归或循环获取当前标记的父级：

var parentTag = $(this).parent().get(0).tagName;

Answer 5

尝试这样的事情

$('span').click(function() {
 var parents = $(this).parents();
 for(var i = 0; i < parents.length; i++){
  console.log($(parents[i]).get(0).tagName)
 }
});

查看现场演示

http://jsfiddle.net/sdA44/1/

Answer 6

只是javascript实现：

window.addEventListener('click', function(e){
    console.log(document.elementFromPoint(e.pageX, e.pageY))
}, false)

3-29-2017

为firefox和chrome工作

Answer 7

我更新了演示http://jsfiddle.net/57bVR/3/，并在代码中添加了要管理的逻辑（如果存在）：

滚动页面
缩放级别html标记（在我工作的项目中给我带来了一些麻烦）


$(document).click(function (e) {
    var htmlZoom = window.getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('zoom');
    var clickX = e.pageX,
    clickY = e.pageY,
    list,
    $list,
    offset,
    range,
    $body = $('body').parents().andSelf();
    $list = $('body *').filter(function () {
            offset = $(this).offset();
            marginLeft = offset.left * htmlZoom - $(document).scrollLeft();
            marginTop = offset.top * htmlZoom - $(document).scrollTop();
            outerWidth = $(this).outerWidth() * htmlZoom;
            outerHeight = $(this).outerHeight() * htmlZoom;
            range = {
                x : [marginLeft,
                    marginLeft + outerWidth],
                y : [marginTop,
                    marginTop + 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;
});

如何获取位于点击点的所有元素的列表？

7 个答案: