Tips for avoiding a scenario where the parent event fires while the child event is already activated

Question

Tips for avoiding a scenario where the parent event fires while the child event is already activated

I'm attempting to prevent a scenario where clicking the child event does not trigger the parent event.

Here is my code:

<div class="card">
  <div class="item item-divider">Choose 3 favorite players</div>
    <ion-item class="item-button-right" ng-repeat="player in dataService.playerlist" item="item" ng-href="#/tab/chat">{{player.name}}
      <div class="buttons">
      <button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player)"></button>
      </div>
    </ion-item>
</div>

Here's the actual situation: http://codepen.io/harked/pen/WvJQWp

What I aim to achieve is the following: Clicking on an item (player) should redirect to the 'Player Detail page'. However, clicking the favorite button should only display an alert and add the player to favorites without redirecting to the 'Player Detail page'.

I have already tried adding item.stopPropagation(); or event.stopPropagation(); but it didn't work.

Any suggestions? Your help would be highly appreciated.

javascript angularjs ionic-framework

Answer 1

Answer №1

When dealing with the item in this scenario, it should be noted that it is not considered an event. It is advisable to utilize event.preventDefault() as well. To retrieve the event from the ng-click function, you must include $event in the arguments, as shown in the code snippet below:

<button class="[...]" ng-click="addToFavorite($event, player)"></button>

In your handler function, ensure to add $event and utilize preventDefault():

$scope.addToFavorite = function ($event, item) {
  alert("One Player Added Successfully!");
  User.favorites.unshift(dataService.playerlist.indexOf(item));
  $event.preventDefault();
}

View Updated codepen

Answer 2

When dealing with the item in this scenario, it should be noted that it is not considered an event. It is advisable to utilize event.preventDefault() as well. To retrieve the event from the ng-click function, you must include $event in the arguments, as shown in the code snippet below:

<button class="[...]" ng-click="addToFavorite($event, player)"></button>

In your handler function, ensure to add $event and utilize preventDefault():

$scope.addToFavorite = function ($event, item) {
  alert("One Player Added Successfully!");
  User.favorites.unshift(dataService.playerlist.indexOf(item));
  $event.preventDefault();
}

View Updated codepen

Answer 3

Answer №2

Ensure that you pass the $event object as a parameter to the ng-click function callback and utilize the $event.stopPropagation() method to prevent the click event from reaching the parent element.

Below is the modified HTML code snippet:

<div class="buttons"> 
  <button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player, $event)"></button>
</div>

Here are the updates to the JS code within your ChooseTabCtrl controller:

  $scope.addToFavorite = function (item, $event) {
      alert("Successfully Added One Player!");
      User.favorites.unshift(dataService.playerlist.indexOf(item));
      $event.stopPropagation();
  }

Best regards,

Answer 4

Ensure that you pass the $event object as a parameter to the ng-click function callback and utilize the $event.stopPropagation() method to prevent the click event from reaching the parent element.

Below is the modified HTML code snippet:

<div class="buttons"> 
  <button class="button button-assertive icon ion-android-favorite" ng-click="addToFavorite(player, $event)"></button>
</div>

Here are the updates to the JS code within your ChooseTabCtrl controller:

  $scope.addToFavorite = function (item, $event) {
      alert("Successfully Added One Player!");
      User.favorites.unshift(dataService.playerlist.indexOf(item));
      $event.stopPropagation();
  }

Best regards,

Tips for avoiding a scenario where the parent event fires while the child event is already activated

Answer №1

Answer №2

Similar questions

Best practice for resetting jquery datatables for proper functioning

Dialog component from HeadlessUI doesn't support the Transition feature

Switch button - reveal/conceal details

Encountering a ReferenceError: require is undefined error when utilizing contextIsolation: true in conjunction with a preload script

Retrieve data depending on the conditions set in the if statement

What is the best way to create direct links to tabs using #anchors in JavaScript?

MERN post request currently in progress

invoking a function in javascript from react

Using Jquery Autocomplete tool for seamless search functionality and making ajax requests without leaving the current page

Error encountered in Internet Explorer 11 with AJAX request - "SCRIPT65535: Parameter required"

Ways to customize easypiechart appearance with CSS styling

The function getStaticPaths() will generate a 404 error, indicating that the page

Sending an AJAX request to a Symfony controller's URL

What is the best way to verify a date entered into a textbox that utilizes a calendar feature?

Playing Sound Instantly in JavaScript without delay

What's the most effective method for implementing dynamic navigation in NextJS using Firebase integration?

Environment variables in Node process are uninitialized

Combining the power of MobileServiceClient and AngularJS for seamless integration

Node 19820 threw an uncaught promise rejection warning due to a TypeError stating that it cannot read the property 'byteLength' of an undefined value

How can I eliminate HTML elements from a string using JavaScript?