Two ng-click events are triggered within a nested ng-click

Question

Two ng-click events are triggered within a nested ng-click

I am facing an issue with using the ng-click within a nested list under another list that also has a ng-click event. Here is my code snippet:

<ul>
  <li
    ng-repeat="facet in node.Facets"
    ng-click="updateNav(facet.Action)"
    ng-cloak
   >
    {{facet.DisplayValue}}
    <ul>
      <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
        ng-click="updateSubNav(sub.Action)"
      >
        {{sub.DisplayValue}}
      </li>
     </ul>
  </li>
</ul>

The problem I am encountering is that when I click on updateSubNav, it automatically triggers updateNav as well. How can I prevent this from happening so that updateNav and updateSubNav function independently?

javascript angularjs angularjs-ng-repeat angularjs-ng-click

Answer 1

Answer №1

Prevent the event from spreading further.

Guidelines:

<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
    ng-click="updateSubNav($event, sub.Action)">
                           ^^^^^^        === Include event object

Procedure:

$scope.updateSubNav = function($event, action) {
    // Implementation details

    // Cease propagation
    $event.stopPropagation();
}

Answer 2

Prevent the event from spreading further.

Guidelines:

<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
    ng-click="updateSubNav($event, sub.Action)">
                           ^^^^^^        === Include event object

Procedure:

$scope.updateSubNav = function($event, action) {
    // Implementation details

    // Cease propagation
    $event.stopPropagation();
}

Answer 3

Answer №2

Understanding event bubbling is crucial. It involves halting the propagation of inner div click events to prevent them from propagating upwards.

ng-click="updateSubNav(sub.Action); $event.stopPropagation()"

An alternate approach is to pass the $event object to the updateSubNav method and stop the event propagation from there, as demonstrated by @Tushar in his response.

Answer 4

Understanding event bubbling is crucial. It involves halting the propagation of inner div click events to prevent them from propagating upwards.

ng-click="updateSubNav(sub.Action); $event.stopPropagation()"

An alternate approach is to pass the $event object to the updateSubNav method and stop the event propagation from there, as demonstrated by @Tushar in his response.

Answer 5

Answer №3

This issue is caused by the phenomenon of event bubbling.

 <ul>
          <li
            ng-repeat="facet in node.Facets"
            ng-click="updateNav(facet.Action)"
            ng-cloak
           >
            {{facet.DisplayValue}}
            <ul>
              <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
                ng-click="updateSubNav(sub.Action, $event)"
              >
                {{sub.DisplayValue}}
              </li>
             </ul>
          </li>
        </ul>


        $scope.updateSubNav = function(action,$event){
         $event.stopPropagation();
        }

Answer 6

This issue is caused by the phenomenon of event bubbling.

 <ul>
          <li
            ng-repeat="facet in node.Facets"
            ng-click="updateNav(facet.Action)"
            ng-cloak
           >
            {{facet.DisplayValue}}
            <ul>
              <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
                ng-click="updateSubNav(sub.Action, $event)"
              >
                {{sub.DisplayValue}}
              </li>
             </ul>
          </li>
        </ul>


        $scope.updateSubNav = function(action,$event){
         $event.stopPropagation();
        }

Two ng-click events are triggered within a nested ng-click

Answer №1

Answer №2

Answer №3

Similar questions

Identifying the conclusion of a folder being dropped in vanilla JavaScript

Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

"Incorporating a hyperlink into a newly added table row with the help

Integrate a Facebook Like-box within a customized jQuery modal window

Extracting Node.js data within a Node.js script

Querying a map within a Mongo function results in an empty variable when accessed outside of the function, but

The error message states: "TypeError: a.map is not a function"

What could be causing this Vue.js component to show the body of a function instead of its intended output?

Can you explain the significance of response.on in Node.js?

Is there a way to dynamically insert objects into an array from an ajax json request, in order to iterate through them later on?

What is preventing the mat-slide-toggle from being moved inside the form tags?

I'm having trouble getting the second controller to function properly in my AngularJS application

Any tips on making Angular 8's sort table function seamlessly integrate with data retrieved from Firebase?

What causes the Request.Params of IHttpHandler to be accurate on the initial call, but become null on the subsequent call?

What is the process of invoking a function from a different component in Vue 3?

Guide to creating a parallax scrolling effect with a background image

Determine in JavaScript whether a character is 32-bit or not

Validation for dates in Angular.Js input is important to ensure that only

Trouble altering an attribute using jquery

I'm encountering an error when trying to pass multiple parameters in an AJAX request