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 空位补零实现代码
Feb 26 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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滚动日志的代码实现
2015/06/10 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
Python面试题集
2012/03/08 面试题
施工安全责任书范本
2014/07/24 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
员工表扬信怎么写
2015/05/05 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
手把手教你导入Go语言第三方库
2021/08/04 Golang
Nginx的gzip相关介绍
2022/05/11 Servers