JavaScript/jquery, uzyskaj wszystkie lokalizacje div (x, y). Przekazywanie dotyku?

Powiel możliwe:
How to get a list of all elements that resides at the clicked point?JavaScript/jquery, uzyskaj wszystkie lokalizacje div (x, y). Przekazywanie dotyku?

wiem, że mogę dostać element z najwyższym z-index używając document.elementFromPoint(x,y).

Problem polega na tym, że muszę pobrać każdy element div zawierający lokalizację zdarzenia dotyku.

Jak mogę propagować poprawki elementów znajdujących się pod spodem?

Widziałem kilka rozwiązań, które hacky pokazać/ukryć elementy podczas ponownego generujących zdarzenia lub wskaźnik styl Zdarzenia z CSS, jednak nie mogę z nich korzystać i mogą powodować migotanie ...

Poniższy diagram ilustruje to, co trzeba zrobić:

Jeśli fioletowe, zielone i niebieskie pudełka reprezentować elementy div, a czerwona kropka jest dotykowy lokalizacja, muszę funkcję, która będzie powrót „div3, div2, div1 ".

Źródło

2012-10-11 Dustin Jackson

mam [plugin] (http://jsfiddle.net/SpYk3/2FZVW/) zrobiłem podczas gdy z powrotem robi coś podobnego z kursorem. Jestem prawie pewny, że tę samą zasadę można zastosować do zmiennej dotykowej, jednak tutaj, w pracy, nie mogę nawet użyć mojego skrzypca, a tym bardziej zobaczyć mój stary kod un-mined, postaram się zapamiętać ten problem, gdy Wracam dzisiaj do domu i słyszę o tobie. Na razie dodałem link do mojej wtyczki i być może uda ci się znaleźć to, czego potrzebujesz w tym "pudełku". g'luck! – SpYk3HH

Ma w nim funkcję, która zwróci wszystkie elementy pod kursorem, choć przez jakiś czas, odkąd go użyłem, więc nie mogę powiedzieć dokładnie, który z nich znajduje się poza moją głową ([więcej przykład użycia wtyczki znaleziono w tym SO odpowiedź] (http://stackoverflow.com/questions/1843674/how-to-change-cursor-from-pointer-to-finger-using-jquery/10353324#10353324)) – SpYk3HH

Nie powinieneś się martwić chwilowo ukrywanie elementów, ponieważ przeglądarka nie będzie przerysowywać, dopóki funkcja się nie zakończy. – Shmiddty

brak migotania z tym kodem:

$("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); 
});

Źródło

2012-10-11 20:32:07 Shmiddty

Nie wiedziałem, że przeglądarka nie będzie przerysowywać .. dzięki za pomoc :) –

Ta metoda nie działa na elementach, które nie mają już display = block. To łamie układ. – qodeninja

Tak, ale mogę zresetować style odpowiednio, jeśli mam inne typy wyświetlania. Na szczęście elementy, których potrzebuję, do użycia bloku. –

Co robi:

$(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 
      } 
     } 
    }); 
});

Źródło

2012-10-11 20:23:14

JavaScript/jquery, uzyskaj wszystkie lokalizacje div (x, y). Przekazywanie dotyku?

Odpowiedz

Powiązane problemy