From the course: JavaScript: Events

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Stopping event propagation

Stopping event propagation - JavaScript Tutorial

From the course: JavaScript: Events

Start my 1-month free trial

Stopping event propagation

Event propogation can save you a lot of time by letting you capture an event on a parent element instead of having to register events for individual item. But on occasion, you may want to have an event stop propagating through the dom chain. We can do that with the stopPropagation () method. Now if you're trying to support older versions of IE, you would do this by setting the cancelbubble property to true for those browsers. Now let's see how this is done. So if we take a look at our page right now, and we click on this pink item right here, you'll notice that it's registering two events. And it's registering them in the capturing face, so they clicked and said the UL happens first and then pink. So let's go into our code, and first you want to change these two elements. To bubble instead of capture. So, I'm going to change the true right here to false. It'll be compatible with more browsers this way. And we want to add the stop propagation method onto the event right after we log…

Contents