HTML CSS- javascript .click() event

Question

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

Are you familiar with javascript or javascript library like jQuery? I think what youa trying to do can easly be accomplished through javascript ... — Emmanuel N
– Emmanuel N, Commented Dec 9, 2013 at 19:47
I am confused: are you having trouble with css or javascript? Or is it both? What are you expecting to happen when the element is clicked? — Nick
– Nick, Commented Dec 9, 2013 at 19:48
@Emmanuel Yes im quite familiar with JS and jquery.. M.Svrcek does it affect what im trying to accomplish? Nick I thinks its an easy fix of simply setting something with css in order to make the LI element be the one which is clickable rather than the children.. — LogixMaster
– LogixMaster, Commented Dec 9, 2013 at 19:52

Bartek Kruszczyński · Accepted Answer · 2013-12-09 19:57:31Z

3

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.

answered Dec 9, 2013 at 19:57

Bartek Kruszczyński

1686 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LogixMaster Over a year ago

Yes I have read about bubbling up etc. and I am adding the listener to the li element not the divs, that is why I am confused

LogixMaster Over a year ago

Actually, this solved my problem as i had and event.preventdefault in the li.click event handler rather than on the a.click event. Many thanks for this!

Collectives™ on Stack Overflow

HTML CSS- javascript .click() event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related