如何防止锚标签上的默认值？

本文翻译自：How to preventDefault on anchor tags?

Let's say I have an anchor tag such as 假设我有一个锚标记，例如

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

How can I prevent the browser from navigating to # in AngularJS ? 如何防止浏览器导航到AngularJS中的＃？

#1楼

参考：https://stackoom.com/question/jrjX/如何防止锚标签上的默认值

#2楼

You can pass the $event object to your method, and call $event.preventDefault() on it, so that the default processing will not occur: 您可以将$ event对象传递给您的方法，并在其上调用$event.preventDefault() ，这样就不会发生默认处理：

<a href="#" ng-click="do($event)">Click</a>// then in your controller.do($event) method
$event.preventDefault()

#3楼

According to the docs for ngHref you should be able to leave off the href or do href="". 根据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 />

#4楼

I prefer to use directives for this kind of thing. 我更喜欢对此类事情使用指令。 Here's an example 这是一个例子

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

And the directive code for eat-click : 和eat-click的指令代码：

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

Now you can add the eat-click attribute to any element and it will get preventDefault() 'ed automagically. 现在，您可以将eat-click属性添加到任何元素，它将自动获得preventDefault()的版本。

Benefits: 好处：

You don't have to pass the ugly $event object into your do() function. 您不必将难看的$event对象传递到do()函数中。
Your controller is more unit testable because it doesn't need to stub out the $event object 您的控制器更具单元可测试性，因为它不需要存根$event对象

#5楼

我找到的最简单的解决方案是：

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

#6楼

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

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

如何防止锚标签上的默认值？相关推荐

boolean类型默认值_「软帝学院」Java的基本数据类型
Java的基本数据类型 Java的两大数据类型: · 内置数据类型 · 引用数据类型内置数据类型 Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型 ...
select2 ajax获取数据设置默认值,初始值
select2是一个非常好用的select美化插件,但是在最近使用时发现,select2在使用ajax获取数据内容时设置默认值非常麻烦,官方给出了一个解决方案就是添加一个属性selected的opti ...
如何使用智能默认值来减少认知负担
作者:Nick Babich 翻译 :吴祺深欢迎访问网易云社区,了解更多网易技术产品运营经验. 如果你问UX设计师们他们的工作目标是什么,他们可能会说,他们的目标是让用户的生活变得简便.当用户体验设 ...
mysql字段默认值不生效的问题解决（上）
mysql字段默认值不生效的问题解决(上) 参考文章: (1)mysql字段默认值不生效的问题解决(上) (2)https://www.cnblogs.com/yuhuameng/p/10703931 ...
springboot设置默认值_线上Bug无法复现？老司机教你一招，SpringBoot远程调试不用愁！...
前言在部署线上项目时,相信大家都会遇到一个问题,线上的 Bug 但是在本地不会复现,多么无奈. 此时最常用的就是取到前端传递的数据用接口测试工具测试,比如 POSTMAN,复杂不,难受不? 今天陈某 ...
驱动上升级固件和恢复默认值
文档索引升级固件需要注意的项目 1.升级键盘固件 2.开始升级 3.切换到BootLoader模式 4.切换到键盘模式 5.恢复默认值升级固件需要注意的项目升级时不要操作键盘最好把背光关闭不 ...
easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法
easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...
php函数默认参数不传值报错,php 关于函数参数的默认值
在写函数的时,有时我们会给参数设置默认值,如果参数默认值没有书写正确会引起警告,因此在这里整理一下正确使用方式 1.默认值必须是常量表达式,不能是诸如变量,类成员,或者函数调用等. 2.注意当使用默认 ...
MySQL命令及使用技巧以及当前时间字段默认值设置
MySQL数据库中需要建立时间字段并且设置其默认值为当前执行时间的方法是:建立字段类型为timestamp,并设置默认值为CURRENT_TIMESTAMP.即可,另外方法是设置字段为timestam ...

如何防止锚标签上的默认值？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何防止锚标签上的默认值？相关推荐

最新文章

热门文章