点下方的元素（光标下） [英] Elements below the point (under cursor)

问题描述

有没有办法找到所有低于的元素？在JavaScript中的

屏幕上有一点？也就是说，给定（x，y）找到大小的所有元素

（w1，h1），其绝对位置与document.body开始

点是（x1， y1），约束x1< = x< = x1 + w1和y1< = y< =

y1 + w1。假设所有元素的绝对定位（如果有需要，我将会尝试推广到其他定位类型，但现在不是）。只需

注意，我正在寻找适用于至少Firefox的解决方案和

IE。


肯定是一种方式循环遍历所有元素，看看它们是否满足上述条件。但是，对于大量的元素（1000s），如果你需要多次快速动作，那么这很慢。

有没有办法更有效地做到这一点？


基本上，我需要的是以下内容，以上只是试一试

解决以下问题。假设你有三个div：div1，div2和div3。 div1

是div2和div3的父级。 div2和div3部分重叠。假设
z-indexes分别为div1，div2和div3的1,2和3。在这个

的情况下，div3位于div2之上，它们重叠。当你例如点击

div3，它会将点击向上传播到层次结构中，所以

div3，div1和document.body将获得点击事件。但是，我会像这样的平面行为 - 当我点击div3时，我想

下面的所有div（在这种情况下，div2）得到点击事件。


解决问题的方法就像我上面建议的那样 - 遍历所有元素

并查看它们是否满足条件。在这个（点击）的情况下，它不会太慢，因为这些事件不是那么频繁，但是对于像mousemove这样的事件，循环遍历所有元素的
事件是一个消耗操作的时间。还有其他方法吗？


我也在考虑制作一些2D排序的元素数组，所以我可以使用例如
二进制搜索以快速查找元素。但是，我并不确定这是一个好主意，因为我需要一个1000个元素的列表

元素 - JavaScript的巨大结构。有必要

处理元素结构的所有变化（添加，

删除，移动，调整大小），所以最后，它可能会不值得。

Is there a way to find all elements that are "under" some point on the
screen in JavaScript? That is, given (x, y) find all elements of size
(w1, h1) whose absolute position compared to the document.body starting
point is (x1, y1), with constraints x1 <= x <= x1 + w1 and y1 <= y <=
y1 + w1. Assume absolute positioning of all elements (if in need, I
will try to generalize to other positioning types, but not now). Just
to note, I am searching for solution that works in at least Firefox and
IE.

A way is surely to loop through all elements and see if they satisfy
the above conditions. However, for large number of elements (1000s),
this is damn slow if you need to do quick actions lots of times. Is
there a way to do this more efficiently?

Basically, what I need is the following, the above is just a try to
solve the below. Assume you have three divs: div1, div2 and div3. div1
is a parent of div2 and div3. div2 and div3 partially overlap. Assume
z-indexes are 1, 2 and 3 for div1, div2 and div3, respectively. In this
case, div3 is on top of div2 where they overlap. When you e.g. click on
div3, it will propagate the click upwards through the hierarchy, so
div3, div1 and document.body will get the click event. However, I would
like the planar behavior of this - when I click on div3, I would like
all the divs below (in this case, div2) to get the click event.

A way to solve it is as I suggested above - loop through all elements
and see if they satisfy the conditions. In this (click) case, it
wouldn''t be too slow, as these events are not so frequent, but for
events like mousemove, looping through all elements is a very time
consuming operation. Any other ways?

I was also thinking about making some 2D-sorted array of elements, so I
can use e.g. binary search to find elements quickly. I am, however, not
sure that this would be a good idea, since I would need a list of 1000s
of elements - huge structure for JavaScript. It would be necessary to
take care of all the changes in the structure of the elements (adding,
deleting, moving, resizing), so at the end, it might not be worth it.

推荐答案

wh ********* @ yahoo.com 写道：

一种方法肯定会遍历所有元素并看到如果他们满足上述条件

。但是，对于大量的元素（1000s），如果你需要多次快速动作，那么这很慢。

有没有办法更有效地做到这一点？

A way is surely to loop through all elements and see if they satisfy
the above conditions. However, for large number of elements (1000s),
this is damn slow if you need to do quick actions lots of times. Is
there a way to do this more efficiently?

哇，你自己比你需要的更难。

你不能只是安排你的文件结构所以你感兴趣的所有元素

都是单个元素的直接子元素？如果是这样的话，

你肯定可以将你的搜索树缩小到数十个而不是全部

页面上的元素。你绝对，肯定不希望

迭代一个对象的所有子节点并为每个子节点分配相同的点击

处理程序 - 对于这些处理程序来说这将是慢速的

独立并同时执行。相反，通过

迭代顶级元素的子元素并执行你想要的任何动作。另外，如果你想要实现的是

拖动页面上的元素，那么你不想使用绝对的

定位 - 看看相反定位：如果您更改了父母的位置，孩子们会自动移动，不需要脚本

。

Wow, you''re making this much harder on yourself than you need to.
Can''t you just arrange your document structure so all the elements
you''re interested in are direct children of a single element? If so,
you can surely narrow down your search tree to dozens instead of all
the elements on a page. You absolutely, positively do NOT want to
iterate through all children of an object and assign the same click
handler to each one - that will be WAY to slow for these handlers to be
executing independently and simultaneously. Instead, iterate through
the children of the top-level element and perform whatever action you
want. Also, if what you''re looking to achieve is something like
dragging elements on a page, then you don''t want to be using absolute
positioning - look at relative positioning instead: if you change the
parent''s location, the children move automatically, no scripting
required.

感谢您的回复！


我可能还不够清楚，让我试着更好地解释一下。我将给你一个我需要解决的问题类型的例子。

你知道麻将纸牌类型的游戏吗？在线工作示例

可以在这里找到：

http://www.by-art.com/mjong/mjong.php


基本上，你有你需要的块与其他街区配对并且

他们消失了。这些块是堆叠的，所以它们有几层

。这是关键。


假设我想要以下内容。当你点击

一些块时，我想在页面的某个单独部分显示它下面的所有块

（因此至少部分隐藏） 。

所以，从顶部看，顶部有一块是完全可见的，在它下面是另一个，在它下面的其他部分，所以

on。块可以部分重叠，或者一个可以完全隐藏另一个，比如游戏中的
。


我建议的一种方法 - 循环遍历所有块（其中比页面上的所有元素都要少，但假设仍有1000块可以存在
，并找到满足

点击是在他们所在的区域内。


我不能只指定点击处理程序，因为事件传播不会因为z-而不是
index - 它按层次结构。如果你点击了

块，而不是屏幕上同一位置的块，那么包含所有

块的容器将获得传播的点击事件。

在我上一篇文章的例子中提到过。基本上，如果你在屏幕上div3位于div3之下的div3上点击了

，div2

将不会收到任何事件通知，但是div1会，因为它是div3的父母
。兄弟姐妹不参加活动，父母也这样做。


所有的积木已经是一个容器的一部分了，他们可以（并且可能会是b $ b b）直接生孩子但是，无论如何，它们有1000个

。通过它们循环找到包含该点的不是一个快速的任务。


我给出了上面的例子，只是为了解释找到元素的必要性鼠标下的
（或者，通常在某个时刻）。可能有必要在移动鼠标时重复此搜索，而不仅仅是在点击时按
。因此，每当您将鼠标移动到其中一个块上时，需要显示其下方的

块。当然，与仅在点击时完成的工作相比，这需要做更多的工作

。这是

快速


var elements = getElementsFromPoint（x，y）


会派上用场。


绝对/相对定位在

这个问题的背景下并不重要，因为没有什么会实际移动，但你是对的

关于后果。


考虑到之前的情况，我无法理解你的解决方案是什么，这将是b $ b。如果您的解决方案仍然适用，请您尝试再次解释吗？

Thanks for the reply!

I probably wasn''t clear enough, let me try to explain this better. I
will give you an example of the type of the problem I need to solve.
You know of Mahjong solitaire type of games? An online working example
can be found here:

http://www.by-art.com/mjong/mjong.php

Basically, you have blocks that you need to pair with other blocks and
they disappear. The blocks are stacked, so there are several layers of
them. This is the key.

Assume I would want something like the following. When you click on
some block, I would like to show all the blocks that are beneath it
(and thus at least partially hidden) in some separate part of the page.
So, looking from the top, there is a block on the top that is
completely visible, beneath it some other, beneath it some other and so
on. Blocks can overlap partially or one can completely hide the other,
as in the game.

One way is as I proposed - loop through all blocks (which is less then
all the elements on the page, but assume still 1000s of blocks can
exist) and find all that satisfy the criteria that the point of the
click is within their region.

I cannot just assign click handler, since the event propagation doesn''t
go by z-index - it goes by hierarchy. The container that holds all the
blocks would get the propagated click event if you clicked on the
block, but not the blocks on the same position on the screen, as I
mentioned in my previous post''s example. Basically, if you have clicked
on div3 on the position of the screen where div2 is beneath div3, div2
wouldn''t get any event notification, but div1 would, since it''s a
parent of div3. Siblings do not get events, parents do.

All the blocks are already part of one container and they can (and
probably will) be its direct children, but there are 1000s of them
anyway. Looping through them to find which contain the point is not a
quick task.

I gave the above example just to explain the need to find elements
under the mouse (or, generally at some point). It might be necessary to
have this search repeated while moving the mouse, not just when
clicking. So, whenever you move a mouse over one of the blocks, the
blocks beneath it need to be displayed. Surely, this is much more work
to be done compared to work being done only when clicking. This is
where a quick

var elements = getElementsFromPoint(x, y)

would come in handy.

Absolute/relative positioning is not important here in the context of
this problem, since nothing would be actually moving, but you are right
about the consequences.

Considering the previous, I couldn''t understand what your solution to
this would be. If your solution still applies, can you please try to
explain it again?

wh ********* @ yahoo.com escreveu：

wh*********@yahoo.com escreveu:

一种方法肯定是遍历所有元素，看看它们是否满足上述条件。但是，对于大量的元素（1000s），如果你需要多次快速动作，那么这很慢。

有没有办法更有效地做到这一点？

A way is surely to loop through all elements and see if they satisfy
the above conditions. However, for large number of elements (1000s),
this is damn slow if you need to do quick actions lots of times. Is
there a way to do this more efficiently?

这是循环方式：< URL：http：//jsfromhell.com/geral/hittest：]


嗯，这取决于你做这种事情的频率，如果它's
非常罕见，循环元素可能是一个不错的选择。

否则我只是将每个盒子的原点存储在一个

有序数组，也许你也可以对终点进行排序，然后

匹配有效数据。原点再次有效终点会给你

你正确的元素啊，有很多方法=]


你还可以保留一棵树坐标为已填充

区域的结构，此树的内部节点只会缩小较大的

区域，但初始化和更新可能会很昂贵你移动

盒子，如果你不动，它可以很快地检索节点，

我只是想，所以也许我''我错了......

-

Jonas Raoni Soares Silva
http://www.jsfromhell.com

这篇关于点下方的元素（光标下）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！