CODEWITHSUNDEEP
javascripthtmlcss
LogixMaster
LogixMaster

Reputation: 586

HTML CSS- javascript .click() event

Fellow friends, im have a bit of a hard time figuring this out, and decided to ask you guys...

I have the following HTML structure(more or less):

<li>
  <a>
    <div></div>
    <div></div>
    <div></div>
  </a>
</li>

divs are set to inline-blocks, anchor is set to block The list element has a css hover class and an active/clicked mode class. The hover styling is working on li.hover: hover but the clicked class is not working for me since the click event is triggering the childrens handlers(the divs) and not the list..

So my question is, how can I set the parent to be the clickable element rather then the children.. And if you could shed some light on why it is different with the hover event(why hover event handler of the parent is triggered,and not the children's, like with the click ), that would be super awsome as I want to fully understand how css and event work.

Edit-

I have a jquery event handler .. 

$(".mylist").click(function(e){
$(this).addClass('selected');

});

The problem is that this doesnt fire as when I click it seems that the divs are 'overlapping' the parent.. Also do not wish to use z-index.. (but I do not know if its the way to go) thanks regards

Upvotes: 0

Views: 121

Answers (1)

Bartek Kruszczyński
Bartek Kruszczyński

Reputation: 168

When you click your div a click event bubbles up through a to li. So if you add your listener to the li instead of the divs then everything should work.

Of course if your click handler for the div calls event.stopPropagation then your handler for li would not work. Same with click handler on a element.

Upvotes: 3

Related Questions