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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
vue 挂载路由到头部导航的方法
Nov 13 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 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
Terran历史背景
2020/03/14 星际争霸
apache php模块整合操作指南
2012/11/16 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
项目实践之javascript技巧
2007/12/06 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Windows下PyMongo下载及安装教程
2015/04/27 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
大学生作弊检讨书
2014/02/19 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
毕业设计致谢语
2015/05/14 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript