Получение идентификатора DIV на основе позиции x & y

Question

Проблема, которую я пытаюсь решить, - «Что у вас на этой позиции?»

Это довольно тривиально, чтобы получить положение x/y (смещение) DIV, но как насчет обратного? Как получить идентификатор DIV (или любого элемента) с учетом позиции x/y?

Answer 1

Используйте селектор JQuery для фильтрации списка всех DIV для соответствия вашим критериям позиции?

Answer 2

Селектор JQuery очень полезен, но (если я не пропустил что-то в документах), на самом деле нет селекторов, которые это сделают. Я не могу отфильтровать по другим критериям, потому что все, с чем я должен работать, - это позиция x и y.

Answer 3

Создайте прослушиватель событий мыши, а затем вызовите событие мыши в этом месте. Это должно предоставить вам весь стек элементов в этом месте.

Или, посмотрите на источник Firebug.

Answer 4

это может быть немного слишком интенсивным, но перебирает весь список элементов div на странице, находя их позиции и размеры, а затем тестируя, находятся ли они под мышкой. я не думаю, что хотел бы сделать это в браузере.

Answer 5

Thanks MattMitchell. Хотелось бы, чтобы все было так просто - я уже знаю, как получить позицию DIV - это немного сложнее.

Nick and John - К сожалению, я не могу использовать положение мыши.

Я думаю, что решение предполагает создание некоторой логики, которая занимает позицию, выполняет некоторую математику и выводит идентификатор DIV. Похоже, нет простого ответа.

Answer 6

Один из вариантов заключается в создании массива объектов «div-dimension». (Не путать с самими div ... IE7 perf расстраивает, когда вы читаете размеры объекта.)

Эти объекты состоят из указателя на div, их размеры (четыре точки ... говорят сверху, слева, внизу и справа) и, возможно, грязный бит. (Dirty bit - это действительно необходимо, только если размеры меняются.

После этого вы можете выполнить итерацию по массиву и проверить размеры. Для этого необходимо, чтобы O (n) выполнялось с каждым движением мыши. метод бинарного поиска ... возможно.

Если вы применяете подход с двоичным поисковым стилем, один из способов - хранить 4 массива, каждый из которых содержит одну точку измерения, а затем двоичный поиск на всех четырех языках. O (4logn) = O (LOGN).

Я не говорю, я рекомендую любой из них, но они могли бы работать.

Answer 7

Если все у вас есть Х и Y р (и вы не можете отслеживать движение мыши, как вы упомянули), тогда вам придется пройти через DOM, пробираясь через каждый DIV. Для каждого DIV вам нужно сравнить его координаты X и Y с теми, которые у вас есть. Это дорогостоящая операция, но это единственный способ. Я предлагаю вам лучше переосмыслить вашу проблему, вместо того чтобы придумать решение для нее.

Answer 8

Возможно, вы обнаружите, что более эффективно перемещаться по дереву DOM один раз при загрузке страницы, получать позиции и размеры всех элементов и хранить их в массиве/хеше/etc. Если вы хорошо структурируете структуру данных, вы сможете быстро найти элемент по заданным координатам, когда вам это понадобится позже.

Рассмотрите, как часто вам нужно будет обнаруживать элемент и сравнивать его с тем, как часто элементы на странице будут меняться. Вы будете балансировать количество раз, когда вам нужно перечислить все местоположения элементов (дорогостоящее вычисление) против количества раз, когда вы действительно используете вычисленную информацию (относительно дешево, надеюсь).

Answer 9

Я думаю, что Джон говорит, что вы можете использовать document.createEvent(), чтобы имитировать mousemove в нужном вам месте. Если вы захватили это событие, добавив eventlistener в тело, вы можете посмотреть на event.target и посмотреть, какой элемент был в этой позиции. Я не уверен, насколько IE поддерживает этот метод, может быть, кто-то еще знает?

http://developer.mozilla.org/en/DOM/document.createEvent

Update: Вот JQuery плагин, который имитирует события:

http://jquery-ui.googlecode.com/svn/trunk/tests/simulate/jquery.simulate.js

Answer 10

function getDivByXY(x,y) { 
    var alldivs = document.getElementsByTagName('div'); 

    for(var d = 0; d < alldivs.length; d++) { 
     if((alldivs[d].offsetLeft == x) && (alldivs[d].offsetTop == y)) { 
     return alldivs[d]; 
     } 
    } 

    return false; 
} 

Answer 11

К сожалению, вызывая изготовленный/имитацию событие мыши не будет работать, так как, когда вы отправляете его, вы должны предоставить целевой элемент. Поскольку этот элемент является тем, который вы пытаетесь выяснить, все, что вы могли бы сделать, это отправить его на тело, как если бы оно уже было пузырилось.

Вы действительно можете сделать это самостоятельно, это вручную пройти через интересующие вас элементы и сравнить их положение/размер/zIndex с точкой x/y и посмотреть, перекрываются ли они. За исключением IE и совсем недавно FF3, где вы можете использовать

var el = document.elementFromPoint(x, y); 

См

http://developer.mozilla.org/En/DOM:document.elementFromPoint

http://msdn.microsoft.com/en-us/library/ms536417(VS.85).aspx