JS onclick event hozzáadás div::before selektor-ra

JS onclick event hozzáadás div::before selektor-ra
2022-02-27T15:07:03+01:00
2022-02-27T16:17:51+01:00
2022-10-15T21:21:35+02:00
Kezdő vagyok
Sziasztok!

Van egy div elem (a példámban piros), amelynek adtam egy ::before selector-t (a példámban zöld).

HTML:

<div class=”elem”></div>
CSS: 

.elem{width:50px;height:50px;background:red} .elem::before{content:””;display:block;width:20px;height:20px;background:green}
A kérdésem pedig az, hogy natív JavaScript-el el tudom-e érni az elem ::before részét?

Vagyis mondjuk egy onclick event-et hozzá lehet-e adni JavaScript-el a div ::before-jának?

Tehát, ha a before-ra (a zöldre) kattintok, akkor mondjuk jöjjön fel egy alert(), viszont ha csak szimplán a div-re (a pirosra) kattintok, akkor ne történjen semmi.

Létezik erre megoldás JS-ben?

Előre is köszönöm szépen!
Mutasd a teljes hozzászólást!
Hali!

Vagyis mondjuk egy onclick event-et hozzá lehet-e adni JavaScript-el a div ::before-jának?

Röviden: nem lehet, a ::before (mint minden más pszeudo-elem) nem „létező” elem, a DOM-ban nem is jön létre.

Hosszabban: az elemnek magához kapcsolsz eseményvezérlőt, viszont az elemtől „elveszed” a kattintás lehetőségét (pointer-events: none;), a ::before pszeudo-elemnek viszont megadod (pointer-events: all;). Ezzel eléred azt, hogy csak azon érvényesül a kattintás. Működés közben: JSFiddle.

Persze, ha az elemen magán is érvényesülnie kell kattintásnak, akkor ez nem megoldás.

Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd