javascript - 防止 Angular Ng-Click 上的区域标签页面重新加载

Question

我有一张带有关联链接图的图像。我在那里的一个区域标签上有一个 ng-click 按钮。目前，当您单击该 ng-click 时，它链接到的函数会运行，但随后页面会重新加载。如何防止页面在此过程中重新加载？

我什至添加了 $event.stopPropagation() 来防止页面重新加载，但由于某种原因它不起作用。这是我的 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>

和我的 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');
      };
    }]);

控制台日志运行，显示函数运行成功。但是，页面仍然会重新加载。我该如何防止这种情况发生？

See Codepen here.

Answer 1

不要将 href 留空。添加 # 到它。

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

//Or 

使用

$event.preventDefault();

stopPropagation 将阻止事件冒泡，而 preventDefault 将阻止默认操作。