Prevent ng-click functionality from activating when clicking on a link inside an external element

Question

Prevent ng-click functionality from activating when clicking on a link inside an external element

I am facing an issue on my website using ui-router. I have a table with ng-click set on the cells, but there are links inside the cells as well. My goal is to disable the ng-click when the link is clicked.

<div ng-click="click()" style="background: #d3d3d3">
  <a ui-sref="about">go to about page</a>
</div>

When the user clicks on the link to go to the about page, I do not want the click function to be called. You can see an example here: http://plnkr.co/edit/kE9CZYcYu1OPA9S0K3Jk?p=preview

Although this example uses a div instead of a table like my actual site, it demonstrates the same behavior. I have attempted to add

ng-click="$event.preventDefault()"

without success.

If anyone has advice or solutions, I would greatly appreciate it. Thank you!

javascript angularjs angular-ui-router angularjs-ng-click

Answer 1

Answer №1

Prevent event bubbling on the anchor tag to stop propagation

<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a>

Another technique is to verify the click target within the click function

<div ng-click="click($event)">

Implementing in JS

$scope.click = function(e){
   if( e.target.tagName ==='A'){
       return; // avoid executing click event
   }
    // proceed with rest of click code
}

Answer 2

Prevent event bubbling on the anchor tag to stop propagation

<a ui-sref="about" ng-click="$event.stopPropagation()">go to about page</a>

Another technique is to verify the click target within the click function

<div ng-click="click($event)">

Implementing in JS

$scope.click = function(e){
   if( e.target.tagName ==='A'){
       return; // avoid executing click event
   }
    // proceed with rest of click code
}

Answer 3

Answer №2

Give it a shot with $event.stopProgation()

<div ng-click="click();" style="background: #d3d3d3">
  <a ui-sref="about" ng-click="$event.stopProgation()">navigate to about section</a>
</div>

This function will prevent events from bubbling up to their ancestors.

Answer 4

Give it a shot with $event.stopProgation()

<div ng-click="click();" style="background: #d3d3d3">
  <a ui-sref="about" ng-click="$event.stopProgation()">navigate to about section</a>
</div>

This function will prevent events from bubbling up to their ancestors.

Prevent ng-click functionality from activating when clicking on a link inside an external element

Answer №1

Answer №2

Similar questions

Issues with Ionic Toggle displaying incorrect value

Error: The initial parameter must be a string, Buffer, ArrayBuffer, Array, or Array-like Object. An object type was passed in instead in CryptoJS

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

Problem with Jsdom retrieving document

Node.js process.exec() function allows you to asynchronously spawn a subprocess

Ways to invoke a function from a service in AngularJS?

I am interested in displaying the PDF ajax response within a unique modal window

Permit the use of HTML tags within an Angular controller or view

What is the best way to create a dynamic pie chart in AngularJS using JSON data?

The AngularJS REST service fails to function properly when attempting to load page content through Ajax requests

What is the best way to sort a table by column index using HTML?

Removing values in javascript for checkboxes that are not selected

A guide to retrieving nested values from a JSON object using JavaScript

Scrolling and adjusting window size while perfectly displaying images pixel by pixel using php and javascript

What are the steps to utilizing dynamic data from a file in JavaScript?

What is the ideal framerate for smooth animation?

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Receiving a blank string after calling fs.readFile within the chokidar.watch(path_file).on('change', ...) function

Angular 6 - Outdated Functions

Delayed callback on blur