See postitus selgitab meetodeid, kuidas teha kindlaks, kas sündmusel event.target on konkreetne klass või ei kasutata JavaScripti.
Kuidas kontrollida, kas event.target sisaldab JavaScripti konkreetset klassi?
Et teha kindlaks, kas failis event.target on konkreetne klass, kasutage järgmisi JavaScripti eelmääratletud meetodeid.
Vaatame, kuidas need meetodid toimivad sündmuse.target klassi määramisel.
1. meetod: kontrollige, kas failil event.target on konkreetne klass Kasutades sisaldab() meetodit
Et teha kindlaks, kas element kuulub kindlasse klassi, kasutage ' sisaldab() ' meetod ' klassiloend ” objekt. Meetodit sisaldab() kasutatakse selleks, et tuvastada, kas kogus on määratud üksus. Selle väljundid ' tõsi 'kui üksus on olemas, muidu annab see ' vale ”. See on kõige tõhusam viis elemendi klassi määramiseks.
Süntaks
Järgige alltoodud süntaksit, et teha kindlaks, kas sündmusel event.target on konkreetne klass või mitte, kasutades meetodit include():
sündmus. sihtmärk . klassiloend . sisaldab ( 'klassi nimi' )Ülaltoodud süntaksis:
- “ sündmus.sihtmärk ” on käivitatud sündmus, mida kontrollitakse, kas see sisaldab konkreetset klassi või mitte.
- ' klassi nimi ” identifitseerib CSS-klassi nime, mis on osa käivitatud sündmusest.
Tagastusväärtus
See naaseb ' tõsi ” kui käivitatud sündmusel on määratud klass; vastasel juhul tagastab see ' vale ”.
Näide
Esiteks looge kolm ' div ” elemente HTML-failis, kasutades HTML-i Stiilige elemendid CSS-stiili abil. Selleks looge CSS-klass ' .div ” kõigi div elementide jaoks: Loo ' .Keskus ” klass lehe keskel olevate elementide seadistamiseks: Nüüd loob iga div eraldi stiili jaoks CSS-klassi. Esimese div puhul määrake taustavärv ' punane ' jaotises ' div1 stiil ” klass: Teise osa jaoks määrake taustavärv ' redis roosa ' kasutades ' rgba(194, 54, 77) ' kood jaotises ' div2Style ” klass: Määra taustavärv ' roosa ' kolmandast osast, luues ' div3Style ” klass: Pärast ülaltoodud HTML-koodi käivitamist näeb väljund välja järgmine: Nüüd JavaScripti failis või stsenaarium ”, kasutage allolevat koodi, et kontrollida, kas sündmusel event.target on konkreetne klass või mitte: Ülaltoodud koodilõigul: Väljund Ülaltoodud GIF näitab, et div1 sisaldab ' Keskus 'klass, nagu see näitab' tõsi ', samas kui div2 ja div3 kuvavad ' vale ' hoiatuskastis, mis tähendab, et need ei sisalda ' Keskus ” klass. Teine JavaScripti eelmääratletud meetod nimega ' tikud() ” abil saab kontrollida, kas konkreetne klass kuulub elemendi või sündmuse alla. ' klassi nimi ” on ainus parameeter, mis on vajalik määramaks, kas element või sihtsündmus sisaldab teatud klassi või mitte. Süntaks Mates() meetodi jaoks kasutatakse alltoodud süntaksit: Ülaltoodud süntaksis Tagastusväärtus Kui sihtsündmusel on klass, tagastab see ' tõsi 'muidu,' vale ” tagastatakse. Kasutage JavaScripti failis või skriptimärgendis allolevaid koodiridu, et kontrollida, kas objektil event.target on konkreetne klass või mitte. tikud() ” meetod: Ülaltoodud koodiridades: Väljund Ülaltoodud GIF näitab, et ainult div3 sisaldab ' div3Style 'klass, nagu see näitab' tõsi ”. Et teha kindlaks, kas käivitatud sündmusel on määratud klass, kasutage JavaScripti ' sisaldab() meetod või tikud() ” meetod. Kuid meetod sisaldab () on üks kõige kasulikumaid meetodeid elemendi klassi määramiseks. Mõlemad meetodid tagastavad ' tõsi 'kui käivitatud sündmusel on klass muu' vale ” tagastatakse. Selles postituses selgitati meetodeid, mille abil saab kindlaks teha, kas failis event.target on konkreetne klass või ei kasutata JavaScripti.
< div klass = 'div div2Style' id = 'div2' > kaks
< div klass = 'div div3Style' id = 'div3' > 3
div >
div >
div >
polsterdus : 10 pikslit ;
kõrgus : 100 pikslit ;
laius : 100 pikslit ;
marginaal : 10 pikslit ;
}
marginaal : auto ;
}
{
taustal - värvi : punane ;
}
{
taustal - värvi : rgb ( 194 , 54 , 77 ) ;
}
{
taustal - värvi : roosa ;
}
kus on klass = sündmus. sihtmärk . klassiloend . sisaldab ( 'Keskus' ) ;
hoiatus ( 'See jaotis sisaldab keskklassi:' + hasClass ) ;
} ) ;
2. meetod: kontrollige, kas failil event.target on konkreetne klass, kasutades meetodit matches()
Näide
kus on klass = sündmus. sihtmärk . tikud ( '.div3Style' ) ;
hoiatus ( 'Selle div'i klass sobib klassiga 'div3Style': ' + hasClass ) ;
} ) ;
Järeldus