如何防止锚标签的默认？

Question

假设我有一个锚标记,例如

<a href="#" ng-click="do()">Click</a>

如何防止浏览器导航到AngularJS中的#？

Answer 1

根据ngHref的文档,你应该能够离开href或做href ="".

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

Answer 2

更新:我已经改变了对这个解决方案的看法.经过更多的开发和花在这方面的时间,我相信这个问题的更好的解决方案是执行以下操作:

<a ng-click="myFunction()">Click Here</a>

然后更新您css的额外规则:

a[ng-click]{
    cursor: pointer;
}

它更简单,提供完全相同的功能,效率更高.希望将来可能有助于其他人查找此解决方案.

以下是我以前的解决方案,我将其留在这里仅用于遗留目的:

如果您遇到这个问题很多,那么解决此问题的简单指令如下:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

它检查所有锚标记(<a></a>)以查看它们的href属性是空字符串("")还是哈希('#')或者是否有ng-click赋值.如果它发现任何这些条件,它会捕获事件并阻止默认行为.

唯一的缺点是它为所有锚标签运行此指令.因此,如果页面上有很多锚标记,并且您只想阻止少数锚标记的默认行为,则该指令效率不高.但是,我几乎总是想要preventDefault,所以我在AngularJS应用程序中使用了这个指令.

Answer 3

您可以将$ event对象传递给您的方法,并对其进行调用$event.preventDefault(),以便不会发生默认处理:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

Answer 4

我更喜欢使用指令来做这种事情.这是一个例子

<a href="#" ng-click="do()" eat-click>Click Me</a>

以及指令代码eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

现在,您可以将该eat-click属性添加到任何元素,它将preventDefault()自动生成.

优点:

1. 您不必将丑陋的$event对象传递给您的do()函数.
2. 您的控制器更易于单元测试,因为它不需要存根$event对象

Answer 5

虽然雷诺给出了很好的解决方案

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

我个人发现在某些情况下你还需要$ event.stopPropagation()以避免一些副作用

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

将是我的解决方案

Answer 6

我找到的最简单的解决方案就是这个:

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

Answer 7

ng-click="$event.preventDefault()"

Answer 8

因此,通过这些答案,@ Chris仍然有最"正确"的答案,我想,但它有一个问题,它没有显示"指针"....

所以这里有两种方法可以解决这个问题,而无需添加游标:指针样式:

1. 使用javascript:void(0)而不是#:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>
   

2. $event.preventDefault()在ng-click指令中使用(所以你不要使用与DOM相关的引用来破坏你的控制器):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>
   

就个人而言,我更喜欢前者而不是后者.这里讨论的javascript:void(0)其他好处.在该链接中还讨论了"不显眼的JavaScript",这是最近可怕的,并不一定直接适用于角度应用.

Answer 9

你可以这样做

1. href从anchor(a)标签中删除属性

2.将css中的指针光标设置为ng单击元素

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

Answer 10

HTML

这里是纯angularjs:接近ng-click函数你可以通过分隔分号来编写preventDefault()函数

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

JS

$scope.do = function() {
    alert("do here anything..");
}

(要么)

你可以这样做,这里已经讨论了一些.

HTML

<a href="#" ng-click="do()">Click me</a>

JS

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

Answer 11

尝试这个我可以看到的选项尚未列在上面:

<a href="" ng-click="do()">Click</a>

Answer 12

避免href事件的最安全方法是将其定义为

<a href="javascript:void(0)" ....>

Answer 13

由于您正在制作网络应用程序,为什么需要链接？

将锚点交换到按钮!

<button ng-click="do()"></button>

Answer 14

我会去：

<a ng-click="do()">Click</a>

• 因为根据文档，您应该可以离开 href，然后 Angular 将为您处理阻止默认值！

整个这个防止默认的事情让我感到困惑，所以我创建了一个JSFiddle 来 说明 Angular 何时何地阻止 default。

JSFiddle 正在使用 Angular 的 a 指令 - 所以它应该完全相同。你可以在这里看到源代码：一个标签源代码

我希望这将有助于澄清一些。

我本来希望将文档发布到 ngHref，但由于我的声誉我不能。

Answer 15

如果仍然相关:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

Answer 16

这是我一直在做的。奇迹般有效！

<a href ng-click="do()">Click</a>