Working example

Question

72

ng-click on parent clicks through children

rated 0 times [ 74] [ 2] / answers: 1 / hits: 35035 / 10 Years ago, sun, january 18, 2015, 12:00:00

I have a <div> element which has another <div> element as its child.

I added the ng-click directive to the parent, and expected it not to be fired when clicking the child. However, it does.

<div class=outer ng-click=toggle()>

    <div class=inner>You can click through me</div>

</div>

Why is it doing this, and how can I avoid it?

Here's a JSFiddle demonstrating the issue

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gregorio

Add To Favorites

Follow

Total Points: 362

Total Questions: 95

Total Answers: 93

Location: Puerto Rico

Member since Sun, Jun 27, 2021

3 Years ago

gregorio questions

1 Vue JS @change and @keydown events in Vue 3

Fri, Apr 8, 22, 00:00, 2 Years ago

1 Angular TSLint - Cannot find builder @angular-devkit/build-angular:tslint

Sun, Nov 28, 21, 00:00, 3 Years ago

1 How to create a div using JavaScript?

Mon, Sep 6, 21, 00:00, 3 Years ago

1 JS Async/Await vs Promise vs Callbacks

Sun, Sep 13, 20, 00:00, 4 Years ago

1 Axios url get reques to for html response is 200 but response.data is empty

Mon, Apr 6, 20, 00:00, 4 Years ago

View All

answered 10 Years ago maxinec · Accepted Answer

You have to cancel event propagation, so the click event of the parent element won't get called. Try:

<div class="outer" ng-click="toggle()">

    <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div>

</div>

When you click the child element, its event gets triggered. But it doesn't stop there. First the click event of the child element is triggered, then the click event of the parent element gets triggered and so on. That's called event propagation, To stop event propagation (triggering of the parents click events), you have to use the above function, stopPropagation.

Working example

I added some CSS padding, so the example is clearer. Without padding the child element takes up the whole inner space and you can not click on the parent without clicking on the child.