详解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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
jquery uaMatch源代码
Feb 14 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 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
PHP脚本中include文件出错解决方法
2008/11/20 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python获取当前目录路径和上级路径的实例
2018/04/26 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python获取地震信息 微信实时推送
2019/06/18 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
python简单实现插入排序实例代码
2020/12/16 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
和平主题的演讲稿
2014/01/12 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
考研英语辞职信
2015/05/13 职场文书
同意报考证明
2015/06/17 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技