详解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 表单中textarea字数限制实现代码
Dec 07 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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/22 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
js闭包的用途详解
2014/11/09 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
详解Python time库的使用
2019/10/10 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
杭州联环马网络笔试题面试题
2013/08/04 面试题
职业规划书如何设计?
2014/01/09 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
家长通知书教师评语
2014/04/17 职场文书
音乐教师求职信
2014/06/28 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书