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_01_理解内存分配原理分析
Oct 11 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
浅谈开发eslint规则
Oct 01 Javascript
基于Three.js实现360度全景图片
Dec 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中namespace use用法实例分析
2016/01/22 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
js函数排序的实例代码
2013/07/01 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
layui文件上传实现代码
2017/05/20 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
快速了解Python相对导入
2018/01/12 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python保存网页图片到本地的方法
2018/07/24 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
详解python中的闭包
2020/09/07 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
招聘专员岗位职责
2014/03/07 职场文书
商场消防安全责任书
2014/07/29 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript