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 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php实现短信发送代码
2015/07/05 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
python保存网页图片到本地的方法
2018/07/24 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python是什么 Python的用处
2020/05/26 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
医院办公室主任职责
2013/12/29 职场文书
中秋节主持词
2014/04/02 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
个人自荐材料
2014/05/23 职场文书
企业年度评优方案
2014/06/02 职场文书
班级口号大全
2014/06/09 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
实习指导老师意见
2015/06/04 职场文书
信息技术课教学反思
2016/02/23 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL