a标签调用js的方法总结


Posted in Javascript onSeptember 05, 2019

a标签点击事件方法汇总

<a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。

这里的href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" ,其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式

javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好。

1. a href="javascript:js_method();" rel="external nofollow" 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" rel="external nofollow" onclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 如果页面有滚动条 点击后网页后返回到页面的最顶端

5.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。

综合上述,在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" rel="external nofollow" onclick="js_method()"
  • a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;" 我们常用的在a标签中有点击事件:
  • a href="javascript:js_method();" rel="external nofollow" rel="external nofollow"

以上就是关于a标签调用js的全部知识点内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
VsCode与Node.js知识点详解
Sep 05 #Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 #Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 #Javascript
关于JS解构的5种有趣用法
Sep 05 #Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 #Javascript
JavaScript获取某一天所在的星期
Sep 05 #Javascript
layui table设置某一行的字体颜色方法
Sep 05 #Javascript
You might like
深入了解PHP类Class的概念
2012/06/14 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python中暂存上传图片的方法
2015/02/18 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
如何在python中判断变量的类型
2020/07/29 Python
is_file和file_exists效率比较
2021/03/14 PHP
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
Python必备技巧之函数的使用详解
2022/04/04 Python