Prevent Area Tag Page Reload on Angular Ng-Click

Question

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.

http://stackoverflow.com/questions/14544741/how-can-i-make-an-angularjs-directive-to-stoppropagation — Walter Chapilliquen - wZVanG, Jun 04 '15 at 16:13
I appreciate the comment, but please look at my question: I've got the line to prevent event propagation already in there. My problem is that preventing event propagation isn't working, not that I don't have it. — alloy, Jun 04 '15 at 16:14
Thanks, jwatts. That fixed it. Can one of you add that as an answer, so I can mark it? — alloy, Jun 04 '15 at 16:20

score 2 · Answer 1 · answered Jun 04 '15 at 16:18

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.

score 1 · Accepted Answer · answered Jun 04 '15 at 16:20

1

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

answered Jun 04 '15 at 16:20

jwatts1980

7,254
2
28
44

Prevent Area Tag Page Reload on Angular Ng-Click

2 Answers2