详解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 Dialog 弹出层对话框插件
Aug 09 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
ztree+ajax实现文件树下载功能
May 18 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
我的论坛源代码(八)
2006/10/09 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Python autoescape标签用法解析
2020/01/17 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
规划编制实施方案
2014/03/15 职场文书
5s推行计划书
2014/05/06 职场文书
安全教育演讲稿
2014/05/09 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书