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 相关文章推荐
js 处理URL实用技巧
Nov 23 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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
php5 mysql分页实例代码
2008/04/10 PHP
php生成excel文件的简单方法
2014/02/08 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
js中的string.format函数代码
2020/08/11 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python实现telnet服务器的方法
2015/07/10 Python
神经网络python源码分享
2017/12/15 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Python 解析xml文件的示例
2020/09/29 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
共青团员自我评价范文
2014/09/14 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
党支部半年考察意见
2015/06/01 职场文书