详解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 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
Jan 04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
Three.JS实现三维场景
Dec 30 Javascript
vue实现在线翻译功能
Sep 27 Javascript
js实现炫酷光感效果
Sep 05 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 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往windows中添加用户
2006/12/06 PHP
iOS10推送通知开发教程
2016/09/19 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
python实现超市扫码仪计费
2018/05/30 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python 串口通信的实现
2020/09/29 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
装修五一活动策划案
2014/01/23 职场文书
《木笛》教学反思
2014/03/01 职场文书
项目建议书范文
2014/05/12 职场文书
求职信模板
2014/05/23 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
环境卫生标语
2014/06/09 职场文书
应届毕业生自荐书
2014/06/18 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
检举信的写法
2019/04/10 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python