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