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 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
vue路由的配置和页面切换详解
Sep 09 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
smarty内置函数section的用法
2015/01/22 PHP
php简单复制文件的方法
2016/05/09 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
js使用highlight.js高亮你的代码
2017/08/18 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Python实现异步IO的示例
2020/11/05 Python
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
如何写早恋检讨书
2014/09/10 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年材料员工作总结
2014/11/19 职场文书
如何写辞职书
2015/02/26 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js