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会阻止默认操作。

Answer 2

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

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

2 个答案: