CODEWITHSUNDEEP
javascriptcss
SeeEssEss
SeeEssEss

Reputation: 11

How to prevent clicking on a child element triggering the click on the label that it is inside?

Here is the code I am trying to adapt. It's a css accordion which I want to adapt into a settings form (i.e. there would be various input types etc in it):

https://codepen.io/anon847159/pen/BaQJrpq

Basically the problem is that when you click on the headings to expand the accordion, when you then click on the sub-items, most of them will close the accordion (since the label has 100% height of both the heading & dropdown items). As is noted, you can see that if the content inside is an <a> tag, it's fine (i.e. the accordion does't close, since I guess this is stopping the propagation of the click to the label), but clicking on e.g. a <p> tag, some padding or something causes the accordion to close

I've tried all I can think of an am honestly just bashing my head here. I though setting pointer-events: none on the dropdown section (.contents) would have done it, but it seems not

If anyone knows how to achieve the desired result, then I'd appreciate it :)

Upvotes: 1

Views: 147

Answers (1)

Vikrant Thete
Vikrant Thete

Reputation: 141

Adding preventDefault should work. {:onclick =>"event.preventDefault()"}

.wrapper
  %input{:id => 'pictures',:type => 'checkbox'}
  %label{:for => 'pictures'}
    %p Heading 1
    %div.lil_arrow
    .content
      %ul
        %li
          %p{:onclick =>"event.preventDefault()"} < p > Doesn't work - closes
        %li
          %a{:href => '#'} < a > Works - stays open
    %span
  %input{:id => 'jobs',:type => 'checkbox'}
  %label{:for => 'jobs'}
    %p Heading 2
    %div.lil_arrow
    .content
      %ul
        %li
          %a{:href => '#'} < a > Works - stays open
        %li
          %p < p > Doesn't work - closes
    %span

Upvotes: 2

Related Questions