Pelės įvykių perdavimas per elementą, turintį absoliučią padėtį

Bandau užfiksuoti pelės įvykius ant elemento, kuriame yra kitas visiškai išdėstytas elementas.

Šiuo metu į absoliučiai pozicionuotą elementą įeina įvykiai ir pereina prie savo tėvų, bet noriu, kad tai būtų „skaidrus“ šiems pelės įvykiams ir siunčia juos į viską, kas yra už jos. Kaip jį įgyvendinti?

204
18 июня '09 в 1:02 2009-06-18 01:02 s4y nustatytas birželio 18 d., 09:02, 2009-06-18 01:02
@ 6 atsakymai
 pointer-events:none; 

Tai yra „CSS“ nuosavybė, dėl kurios įvykiai „praeina“ per DOM elementą, kuriam jis taikomas, ir įvykį įvykdo „žemiau“.

Daugiau informacijos rasite https://developer.mozilla.org/en/css/pointer-events

Ji nepalaikoma iki IE 11; visi kiti gamintojai ją palaikė jau kurį laiką (bendra parama buvo ~ 92% per 12/16): http://caniuse.com/#feat=pointer-events (dėka @Sidnicious už nuorodos pateikimą komentaruose)

334
22 июня '11 в 17:49 2011-06-22 17:49 atsakymas pateikiamas 2009 m. birželio 22 d., 11 d., 17:49 PM 2011-06-22 17:49

Jei viskas ko jums reikia, galite tai padaryti naudodami „ document.elementFromPoint metodą:

  • pašalinant viršutinį sluoksnį ant pelės,
  • x ir y koordinates iš įvykio į document.elementFromPoint metodą, kad gautumėte elementą po juo ir tada
  • aukščiausio lygio atkūrimas.
44
18 июня '09 в 9:08 2009-06-18 09:08 atsakymą pateikė Jed Schmidt birželio 18 d. 09:08 2009-06-18 09:08

Taip pat malonu žinoti ... Pointerio įvykiai gali būti išjungti pagrindiniam elementui (galbūt skaidriame div) ir vis dar gali būti įjungti vaikų elementams. Tai naudinga, jei dirbate su keliais dubliavimosi sluoksniais, kur norite, kad galėtumėte spustelėti bet kurio lygio vaikus. Norėdami tai padaryti, visi tėvų divai gauna pointer-events: none , o vaiko paspaudimai gauna rodyklės įvykius, kurie yra iš naujo pointer-events: all

 .parent { pointer-events:none; } .child { pointer-events:all; } <div class="some-container"> <ul class="layer-0 parent"> <li class="click-me child"></li> <li class="click-me child"></li> </ul> <ul class="layer-1 parent"> <li class="click-me-also child"></li> <li class="click-me-also child"></li> </ul> </div> 
22
07 нояб. Atsakymą pateikė Allisone, lapkričio 7 d. 2014-11-07 14:08 '14, 14:08 2014-11-07 14:08

Priežastis, dėl kurios jūs negavote įvykio, yra tai, kad absoliučiai padėtas elementas nėra elementas, kurį norite naudoti „spustelėję“ (mėlynas div). Švariausias būdas, kaip aš galiu galvoti, yra absoliuti elemento įtraukimas į vaiko elementą, kurį norite spustelėti, bet manau, kad jūs negalite to padaryti arba jūs negalėsite įdėti šio klausimo :)

Kitas variantas yra užregistruoti paspaudimo įvykių tvarkytoją absoliučiam elementui ir paskambinti paspaudimų tvarkytojui, skirtam mėlynam div, todėl jie abu mirksi.

Dėl to, kaip įvykiai vyksta per DOM, nesu įsitikinęs, ar jums yra paprastesnis atsakymas, bet aš labai smalsu, jei kas nors turi kokių nors triukų, apie kuriuos nežinau!

6
18 июня '09 в 1:20 2009-06-18 01:20 atsakymą pateikė Loktar, birželio 18 d., „09“, 1:20 2009-06-18 01:20

Yra „JavaScript“ versija, kuri rankiniu būdu persiunčia įvykius iš vienos srities į kitą.

Aš jį išvaliau ir paverčiau jQuery įskiepiu.

Čia yra „Github“ saugykla: https://github.com/BaronVonSmeaton/jquery.forwardevents

Deja, tikslas, kuriuo naudodavau kaukę „Google“ žemėlapių viršuje, nepašalino įvykių ir nepakeitė pelės žymeklio, todėl vartotojas pakankamai blogai dirba, kad nusprendžiau paslėpti kaukę po IE ir Opera - dvi naršykles, kurios nepalaikykite žymeklio įvykių.

3
27 марта '13 в 19:51 2013-03-27 19:51 atsakymą pateikė Mikepote kovo 27 d. 13 val. 19:51 2013-03-27 19:51

Jei žinote elementus, kuriems reikia pelės įvykių, ir jei jūsų perdanga yra skaidri, galite paprasčiausiai nustatyti z-indeksą į kažką daugiau nei perdangos. Visi įvykiai, žinoma, šiuo atveju turėtų veikti visose naršyklėse.

0
25 февр. ricosrealm atsakymas, vasario 25 d 2012-02-25 21:02 '12 9:02 val. 2012-02-25 21:02

Peržiūrėkite kitus klausimus apie „ žymų arba „ Klauskite klausimą“

"192.102.6.96 - 192.102.6.96"