在 Angular Ng-Click 时防止区域标签页面重新加载

Question

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

我什至添加了 $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 将阻止默认操作。

Answer 2

我不确定某些其他功能是否需要 stopPropagation()，但我认为应该是 $event.preventDefault()。

在 Angular Ng-Click 时防止区域标签页面重新加载

Prevent Area Tag Page Reload on Angular Ng-Click

html

javascript

event-propagation

angularjs

angularjs-ng-click