详解a标签添加onclick事件的几种方式


Posted in Javascript onMarch 29, 2019

我们常用的在a标签中有点击事件:

1. a href="javascript:js_method();" rel="external nofollow"

这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不 必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句

2. a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

综合上述,在a中调用js函数最适当的方法推荐使用:
a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

以上所述是小编给大家介绍的a标签添加onclick事件的几种方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
浅谈js闭包理解
Mar 28 #Javascript
微信小程序中转义字符的处理方法
Mar 28 #Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 #Javascript
详解Js里的for…in和for…of的用法
Mar 28 #Javascript
ES7之Async/await的使用详解
Mar 28 #Javascript
You might like
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
js tab 选项卡
2009/04/26 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
期末评语大全
2014/05/04 职场文书
个人收入证明范本
2014/09/18 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
实习证明格式范文
2015/06/16 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
python自动计算图像数据集的RGB均值
2021/06/18 Python