详解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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
react中的DOM操作实现
Jun 30 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
php 不同编码下的字符串长度区分
2009/09/26 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
JS 表单验证大全
2011/11/23 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
解读ES6中class关键字
2017/11/20 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python 多维List创建的问题小结
2019/01/18 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python列表操作方法详解
2020/02/09 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
好人好事演讲稿
2014/09/01 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python