jquery click with nested div

Question

I have a div and when I click, it opens a menu. In that div i have a nested div, and when I click on, it opens the same menu which is also logical.

Now I want when I press the nested div it doesn't open the menu.

How can I do that?

James Allardice · Accepted Answer · 2011-10-27 07:07:29Z

4

You can bind a click event handler to the inner div and stop the propagation of the event there:

$("#innerDiv").click(function(e) {
    e.stopPropagation();
});

That will prevent the event from bubbling up to the parent element, where it would cause the click event handler bound to it to fire.

answered Oct 27, 2011 at 7:07

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

2 Comments

Do you have to handle IE with e.cancelBubble = true as well, or does jQuery handle this?

@peirix - jQuery normalises the event object so you don't need to worry.

xdazz · Accepted Answer · 2011-10-27 07:07:56Z

0

Use event.stopPropagation() to prevents the event from bubbling up the DOM tree.

answered Oct 27, 2011 at 7:07

xdazz

161k38 gold badges255 silver badges278 bronze badges

Jayendra · Accepted Answer · 2011-10-27 07:09:14Z

0

answered Oct 27, 2011 at 7:09

Jayendra

52.8k4 gold badges83 silver badges90 bronze badges