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实现的分页函数
Dec 22 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
JS监听组合按键思路及实现过程
Apr 17 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php下过滤HTML代码的函数
2007/12/10 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python实现list反转实例汇总
2014/11/11 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
Django forms组件的使用教程
2018/10/08 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL