我有一张带有关联链接图的图像。我在那里的一个区域标签上有一个 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');
};
}]);
控制台日志运行,显示函数运行成功。但是,页面仍然会重新加载。我该如何防止这种情况发生?
最佳答案
不要将 href
留空。添加 #
到它。
<area shape="rect" coords="0,0,350,150" href="#" ng-click="slideClick($event)">
//Or
使用
$event.preventDefault();
stopPropagation
将阻止事件冒泡,而 preventDefault
将阻止默认操作。
关于javascript - 防止 Angular Ng-Click 上的区域标签页面重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30648957/