No onclick when child is clicked

Question

I have the following html code: ```

Lorem ipsum dolar sit amet

``` And I have a jQuery onclick event on the `.outerElement` however, I don't want the `.outerElement` onclick event to be called when I click on the attachment, is there some way to prevent this or to check which element is clicked?

Accepted Answer

Use `event.stopPropagation()` on the child element.

```
$(".attachment").on("click", function(event){
  event.stopPropagation();
  console.log( "I was clicked, but my parent will not be." );
});
```

This prevents the event from bubbling up the DOM to the parent node.

Also part of the `event` object is the `target` member. This will tell you which element triggered the event to begin with. However, in this instance, `stopPropagation` appears to be the best solution.

```
$(".outerElement").on("click", function(event){
  console.log( event.target );
});
```

No onclick when child is clicked

Solution

Problem

Related problems