CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-clickevent-propagation
alloy
alloy

Reputation: 766

Prevent Area Tag Page Reload on Angular Ng-Click

I've got an image with an associated link map. The one area tag I have in there has an ng-click on it. Currently, when you click that ng-click, the function it links to runs, but then the page reloads. How do I prevent the page from reloading in the process?

I've even added $event.stopPropagation() to prevent the page reload, but it's not working for some reason. Here's my HTML:

<div ng-app="programApp" ng-controller="programController">
  <img src="http://placehold.it/350x150" usemap="#testMap">

  <map name="testMap">
    <area shape="rect" coords="0,0,350,150" href="" ng-click="slideClick($event)">
  </map>
</div>

and my Angular:

angular.module('programApp', [
    'programApp.controllers',
]);
angular.module('programApp.controllers', [])
    .controller('programController', ['$scope',  
    function($scope){

      $scope.slideClick = function($event){
        $event.stopPropagation();
        console.log('this ran');
      };
    }]);

The console log runs, showing that the function successfully runs. However, the page still reloads. How do I prevent this?

See Codepen here.

Upvotes: 0

Views: 2789

Answers (2)

jwatts1980
jwatts1980

Reputation: 7356

I am not sure if the stopPropagation() is required for some other functionality, but I think it should be $event.preventDefault() instead.

Upvotes: 1

Zee
Zee

Reputation: 8488

Don't keep href empty. Add # to it. 

<area shape="rect" coords="0,0,350,150" href="#" ng-click="slideClick($event)">

//Or

Use

$event.preventDefault();

The stopPropagation will stop the event from bubbling whereas the preventDefault will prevent the default action.

Upvotes: 2

Related Questions