单击元素时，获取背景中的元素列表

On element click, get a list of elements that are in the background?

本文关键字：元素 列表 背景 获取 单击      更新时间：2023-09-26

当我点击一个元素时，我想得到一个位于背景中并与点击的元素相交的元素列表。是否可以在单击处理程序中执行此操作？

$('<div id="overlay" />').appendTo('body').on('click', function(e){
    console.log(e.target);
    // was the click on top of div#a, div#b or both? how can I know this?
});
body{
    position: relative;
}
div{
    border: 1px solid red;
    display: inline-block;
    padding: 10px;
}
#overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">
    test
    <div id="b">
        test
    </div>
</div>

您需要手动循环遍历DOM中的所有元素，并将边界框与单击的鼠标位置进行比较。事件对象本身不知道任何CSS定位。类似于：

$('<div id="overlay" />').appendTo('body').on('click', function(e){
    var x = e.pageX;
    var y = e.pageY;
    var elms = $('body *').not(this).filter(function() {
        var b = this.getBoundingClientRect();
        return x > b.left && x < b.left+b.width && y > b.top && y < b.top+b.height;
    });
    console.log(elms);
});

您可能需要限制要与之进行比较的元素。演示：http://jsfiddle.net/o2v6v3gk/

请注意，这不会检测元素是否在覆盖层的"后面"，也就是z索引。

相关文章：