Получить css-код для координат экрана

#javascript #jquery #html #coordinates

#javascript #jquery #HTML #координаты

Вопрос:

я пытаюсь взломать добавление функции в плагин.

Мой сценарий заключается в том, что div накладывается поверх таблицы со многими ячейками. Этот div охватывает множество ячеек таблицы под ним. Но это не встроено в таблицу, как упоминалось; но на самом деле position устанавливает абсолютные координаты x, y на экране.

Если я щелкну по этому плавающему элементу, я смогу получить координаты мыши jsEvent x, y..

Как я могу затем использовать эти координаты, чтобы получить больше данных, таких как css всех элементов в этой координате, например, класс ячеек, идентификатор и т.д. Непосредственно под щелчком x, y? или все ячейки непосредственно ниже или выше.

Я пытаюсь использовать jQuery. Любые предложения.

1. Единственным кроссбраузерным способом сделать это было бы перебирать каждый элемент td, проверяя каждое смещение с помощью координат мыши. Почему вы не можете просто использовать $('td').click(function() {...}); ?

2. потому что я не нажимаю на фактическую таблицу. я нажимаю div поверх таблицы, которая нигде не находится внутри таблицы. Таким образом, td click никогда не сработает, если я не нажму на td, а не на плавающий div .. видите?

3. но идея пройти через все td — неплохая идея, но очень неэффективная.. есть другие предложения?

4. Единственным другим возможным вариантом было бы document.elementFromPoint(x, y) , но я думаю, что он получает верхний элемент, поэтому он, вероятно, не сработал бы (не говоря уже о его не очень совместимости с разными браузерами).

Ответ №1:

Это должно сработать (где mousex и mousey являются координатами):

 $('td').each(function(index) {
    var offset = $(this).offset();
    if ((offset.left   $(this).outerWidth()) > mousex amp;amp; offset.left < mousex amp;amp; (offset.top   $(this).outerHeight()) > mousey amp;amp; offset.top < mousey) {
       // $(this).css...
    }
  });

Ответ №2:

Вот так:

 $("#div").click(function(event){
  var x = event.pageX, y = event.pageY;
  var $clickedTd = $("#table td").filter(function(){
    var tdx = $(this).offset().left, tdy = $(this).offset().top;
    var tdw = $(this).width(), tdh = $(this).height();
    return (x >= tdx amp;amp; x <= tdx w amp;amp; y >= tdy amp;amp; y <= tdy   tdh);
  });
  //Here you have a reference to the clicked cell in $clickedTd. use it as you want;
});

Что мы делаем, так это находим td, который находится как раз в том месте, на которое мы нажали (получаем координаты щелчка div).

Приветствия