Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Howto: div with onclick inside another div with onclick javascript

just a quick question. I'm having a problem with divs with onclick javascript within each other. When I click on the inner div it should only fire it's onclick javascript, but the outer div's javascript is also being fired. How can the user click on the inner div without firing the outer div's javascript?

<html> <body> <div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div     <div onclick="alert('inner');"  style="width:200px;height:200px;background-color:white;" />inner div</div> </div> </div> </body> </html> 
like image 646
Daniel Brink Avatar asked Mar 05 '10 07:03

Daniel Brink


2 Answers

Basically there are two event models in javascript. Event capturing and Event bubbling. In event bubbling, if you click on inside div, the inside div click event fired first and then the outer div click fired. while in event capturing, first the outer div event fired and than the inner div event fired. To stop event propagation, use this code in your click method.

   if (!e) var e = window.event;     e.cancelBubble = true;     if (e.stopPropagation) e.stopPropagation(); 
like image 148
Adeel Avatar answered Sep 18 '22 20:09

Adeel


Check out the info on event propagation here

In particular you'll want some code like this in your event handlers to stop events from propagating:

function myClickHandler(e) {     // Here you'll do whatever you want to happen when they click      // now this part stops the click from propagating     if (!e) var e = window.event;     e.cancelBubble = true;     if (e.stopPropagation) e.stopPropagation(); } 
like image 24
Tim Goodman Avatar answered Sep 19 '22 20:09

Tim Goodman