详解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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
validator验证控件使用代码
Nov 23 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
详解JavaScript UTC时间转换方法
Jan 07 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
微信小程序保持session会话的方法
Mar 20 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实现约瑟夫问题的方法小结
2015/03/23 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python实现udp聊天窗口
2020/03/31 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
大学生写自荐信的技巧
2014/01/08 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
党性心得体会
2014/09/03 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
入党团支部推荐意见
2015/06/02 职场文书
python小程序之飘落的银杏
2021/04/17 Python
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL