详解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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
flexigrid 参数说明
Nov 23 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
JS闭包经典实例详解
Dec 20 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 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模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
Python实现端口检测的方法
2018/07/24 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
电子狗项圈:eDog Australia
2019/12/04 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
小区门卫管理制度
2014/01/29 职场文书
期末评语大全
2014/05/04 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
员工工作能力评语
2014/12/31 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
python 三边测量定位的实现代码
2021/04/22 Python
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
服务器nginx权限被拒绝解决案例
2022/09/23 Servers