Kevin Powell - Community•6d ago

Eventlistener for a div fully occupied with childrens

hi i am trying a to do an interactive image panels gallery when you press the panel it gets bigger via event listener ,the problem is the panel div has childrens that occupy the whole div clickable space i want the event listener triggred when clicking on any spot on the div (ive handled similare problem with a bad code which i wrote a condition for the parent and every child seperatly) . here`s my code : https://codepen.io/ilyas-draissia/pen/JoPrbqE

ilyas-draissia

CodePen

Untitled

...

26 Replies

clevermissfox•6d ago

Document.addEventListener(‘click’,(e) => {
  if (e.target.closest(‘.panel’)) {//do something e.g. add a class that scales 
}

Document.addEventListener(‘click’,(e) => {
  if (e.target.closest(‘.panel’)) {//do something e.g. add a class that scales 
}

Btw the html section in codePen is just everything in bw <body> tags. Your stuff for the head goes in Settings -> html , area for the head . So your style tags can go in there or put its contents in the css drawer

ilyesOP•6d ago

Thanks you are a life saver I don't understand your intentions i took css from stylesheet file and put it in style tags same with js just to post it in codepen if that what you ment ?

Sleep Twitch•6d ago

Codepen has a separate space for the css and a separate space for the scripts. So it is normal to put the css in the space for the css instead of in the html part

Sleep Twitch•6d ago

Put the css in the middle column and the scripts in the right column instead of everything in the left "html" one

clevermissfox•6d ago

The codePen editor HTML drawer is only in bw <body> tags , so you only paste everything from within your body tags there ; meaning the script tags at the bottom is fine but everything in your head tags goes in a different section (in settings) . So style tags would go there (or add the rules to the css drawer), <title> would go there , <link> tags would go there, <meta> etc etc In the future you can just grab everything in bw the <body> tags and paste it in html drawer , everything in bw the <head> tags and paste it in the proper place in the settings->html->head input ; everything from your stylesheet into the css drawer (or as mentioned can stay in style tags and in the settings-> html -> head input) and script can go in the JavaScript drawer or stay as you have it in the html drawer since it lives before the ending body tag

ilyesOP•6d ago

My mistake here I did this on intention thought it would be better to put everything in html file .

clevermissfox•6d ago

If you inspect it it ends up like this

<html>
<head>
<title>Codepen Editor</title>
</head>
<body>
  <html>
     <head>
       <title>Your project</title>
       <style> /* your styles */</style>
     </head>
      <body>
    <!— your elements —>
    <script>//your scripts </script> 
    </body>
   </html>
</body>
</html>

<html>
<head>
<title>Codepen Editor</title>
</head>
<body>
  <html>
     <head>
       <title>Your project</title>
       <style> /* your styles */</style>
     </head>
      <body>
    <!— your elements —>
    <script>//your scripts </script> 
    </body>
   </html>
</body>
</html>

Even more so nested than this I think but anyways just trying to get across it’s not a blank html file it’s just for what goes in the body

ilyesOP•6d ago

Basically its a 30 js challenges repository i downloaded from github the owner wrote everything in html file so it be easier i guess? Idid replace matches() with closest() but nothing changed

clevermissfox•6d ago

i ended up refactoring a bit https://codepen.io/Miss-Fox/pen/raBGwjM?editors=0010

CleverMissFox-GAcct

CodePen

#discord-eventListeners

...

clevermissfox•5d ago

And your functions are incorrect.

function addGlobalEventListener(type,selector,callback,parent){
  parent.addEventListener(type,callback)
};
   addGlobalEventListener('click',".panel",e=>{e.target.closest(".panel").classList.toggle("open");e.target.closest(".panel").classList.toggle("active-open")},panels);

function addGlobalEventListener(type,selector,callback,parent){
  parent.addEventListener(type,callback)
};
   addGlobalEventListener('click',".panel",e=>{e.target.closest(".panel").classList.toggle("open");e.target.closest(".panel").classList.toggle("active-open")},panels);

The transitionend is registered no matter when the transition runs, not only after the click , but eg when you resize the window it will run (when it’s correct and targeting the property being transitioned) I’m not clear why you’re using and toggling both the .open and .active-open class ? Can you explain please ?

ilyesOP•5d ago

.open is for the image panel so it goes bigger flex-grow:5 and .active-open class is for first,second p elements so they go up or down translateY:0.

clevermissfox•5d ago

But they are both added to the panel and being turned off and on at the same time. I don’t get why you need both Why not .panel.open p:nth-child(2) {translate }?

ilyesOP•5d ago

sorry rookie mistake but hear me out i wrote another one more simpler

ilyesOP•5d ago

https://codepen.io/ilyas-draissia/pen/xbKXWxR

ilyas-draissia

CodePen

Untitled

...

ilyesOP•5d ago

now my issue is i want the 1 and 3 <p> to be triggred by eventlistener by toggling their class ,and their class has styles transform:translateY(0%)

clevermissfox•5d ago

Like how this works ? https://codepen.io/Miss-Fox/pen/raBGwjM?editors=0010 my point is you don’t need to give panel a second class or the children an active class. You can use the ```.panel:is(.open) :is(>:first-child, >:last-child) {translate: 0 0; } No need for .active-open on .panel or p. The trigger is whether .open is added or not And when that’s true they translate:0, when it’s false they translate out of the viewport

CleverMissFox-GAcct

CodePen

#discord-eventListeners

...

clevermissfox•5d ago

You’re over complicating this way more than you need to

const panels=document.querySelector(".panels");
  panels.addEventListener("click",e=>{
    const element=e.target.closest(".panel");
    if(element){
      console.log("clicked");
      element.classList.toggle("open");
    }
  })

const panels=document.querySelector(".panels");
  panels.addEventListener("click",e=>{
    const element=e.target.closest(".panel");
    if(element){
      console.log("clicked");
      element.classList.toggle("open");
    }
  })

ilyesOP•5d ago

I want it to be like the first one

clevermissfox•5d ago

Then that’s to do with the css on the .open class, not on the event listener that toggles the class

ilyesOP•5d ago

my function does to jobs 1-gives <div class="panel"> a class of "open" so it could get bigger and it does it flawlessly. 2-gives the first and third <p> a class of"active-open" so they could translateY ,here were ive encountered problems the <p> element receives the "active-open" but nothing changes .

ilyesOP•5d ago

clevermissfox•5d ago

I can only say the same thing so many different ways, so many times 😆 Change your selector

.open :is( :first-child, :last-child ) { translate : 0;}

.open :is( :first-child, :last-child ) { translate : 0;}

And get rid of all the active-open stuff it’s not necessary

ilyesOP•5d ago

thanks ill work on it

clevermissfox•5d ago

There was a comment ending */ in the wrong place so this pen should work now

Gaming

Programming

Eventlistener for a div fully occupied with childrens

Did you find this page helpful?