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动态创建div
Sep 25 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
js实现一个简易计算器
Mar 30 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
javascript实现前端分页效果
Jun 24 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简单系统查询模块代码打包下载
2008/06/07 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
护理专业自我鉴定
2014/01/30 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
报名委托书
2015/01/29 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
教师旷工检讨书
2015/08/15 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书