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

Question

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

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

Answer 1

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

Вам действительно остается сделать это самостоятельно, то есть вручную пройтись по интересующим вас элементам и сравнить их позицию / размер / 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

Answer 2

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 3

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

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

Answer 4

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

Answer 5

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

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

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

http://jquery -ui.googlecode.com / SVN / багажник / тесты / имитировать / jquery.simulate.js

Answer 6

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

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

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

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

Я не говорю, что рекомендую что-то из этого, но они МОГУТ работать.

Answer 7

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

Answer 8

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

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

Answer 9

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

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

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

Answer 10

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