Javascript/jquery, получить расположение всех div в (x, y). Пересылка касаний?

Возможный дубликат:
Как получить список всех элементов, находящихся в точке щелчка?

Я знаю, что могу получить элемент с наивысшим z-индексом, используя document.elementFromPoint(x,y).

Проблема в том, что мне нужно получить каждый div, содержащий местоположение сенсорного события.

Как я могу распространять касания на элементы под ним?

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

На следующей диаграмме показано, что мне нужно сделать:

Если фиолетовый, зеленый и синий прямоугольники представляют собой элементы div, а красная точка — место касания, мне нужна функция, которая возвращала бы «div3, div2, div1».


javascript click touch jquery event-propagation
person Dustin Jackson    schedule 11.10.2012    source источник
comment
У меня есть плагин, который я сделал некоторое время назад, который делает что-то подобное с курсором. Я почти уверен, что тот же принцип можно применить к сенсорной переменной, однако здесь, на работе, я даже не могу использовать свою скрипку, не говоря уже о моем старом ненайденном коде, я постараюсь вспомнить эту проблему, когда Я вернусь домой сегодня и встану с тобой. На данный момент я включил ссылку на свой плагин, и, возможно, вы сможете найти то, что вам нужно, так сказать, в этом поле. удачи!   -  person SpYk3HH    schedule 12.10.2012
comment
В нем есть функция, которая вернет все элементы под курсором, хотя я уже давно ее не использовал, поэтому я не могу точно сказать, какой из них у меня в голове (дополнительный пример использования плагина можно найти в этом ответе SO)   -  person SpYk3HH    schedule 12.10.2012
comment
Вам не следует беспокоиться о мгновенном сокрытии элементов, так как браузер не будет перерисовывать до тех пор, пока функция не завершится.   -  person Shmiddty    schedule 12.10.2012

Ответы (2)


arrow_upward
19
arrow_downward

Нет мерцания с этим кодом:

$("body").click(function(e){
    var x = e.pageX, y = e.pageY;
    var res = [];

    var ele = document.elementFromPoint(x,y);
    while(ele && ele.tagName != "BODY" && ele.tagName != "HTML"){
        res.push(ele);
        ele.style.display = "none";
        ele = document.elementFromPoint(x,y);
    }

    for(var i = 0; i < res.length; i++){
        res[i].style.display = "";
    }
    console.log(res);
});​
person Shmiddty    schedule 11.10.2012
comment
Я не знал, что браузер не будет перерисовывать .. спасибо за помощь :) - person Dustin Jackson; 12.10.2012
comment
Этот метод не работает с элементами, у которых еще нет display=block. Это ломает макет. - person qodeninja; 15.10.2012
comment
Да, но я могу соответствующим образом сбросить стили, если у меня есть другие типы отображения. К счастью, элементы, которые мне нужны для использования, блокируются. - person Dustin Jackson; 15.10.2012
comment
Это также должно работать с использованием .style.visibility = "hidden"/"visible" - person Shmiddty; 16.10.2012
comment
ха, это то, что вы имели в виду ранее в чате о возможности детализировать и получить других. Спасибо мужик выручил. - person Loktar; 19.03.2014
comment
Вообще классный соус! - person Scott Walter; 18.09.2015

arrow_upward
2
arrow_downward

Что делать:

 $(document).click(function(e) { 
    var pageX = e.pageX;
    var pageY = e.pageY;
    $('*').each(function(index) {
        var offset = $(this).offset();
        var left = offset.left;
        var right = offset.right;
        var width = $(this).width();
        var height = $(this).height();
        if(pageX > left && pageX < left + width) {
             if(pageY > top && pageY < top + height) {
                  //Handle the div
             }
        }
    });
});
person Tom G    schedule 11.10.2012