详解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之ESC(第二类混淆)
May 06 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
VSCode 配置uni-app的方法
Jul 11 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封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php面向对象值单例模式
2016/05/03 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
jQuery each()小议
2010/03/18 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
python通过配置文件共享全局变量的实例
2019/01/11 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
承认错误的检讨书
2014/01/30 职场文书
仓管岗位职责范本
2014/02/08 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫