详解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 相关文章推荐
javascript据option的value值快速设定初始的selected选项
Aug 13 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
jquery.validate使用详解
Jun 02 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 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
thinkphp循环结构用法实例
2014/11/24 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
简单谈谈json跨域
2016/03/13 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
C语言编程练习
2012/04/02 面试题
个人简历自我评价范文
2014/02/04 职场文书
销售主管竞聘书
2014/03/31 职场文书
食品采购员岗位职责
2014/04/14 职场文书
企业整改报告范文
2014/11/08 职场文书
法制教育主题班会
2015/08/13 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python