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 按回车键相应按钮提交事件
Nov 02 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
vue如何截取字符串
May 06 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
JavaScript继承的三种方法实例
May 12 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扩展函数
2006/10/09 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
使用js画图之饼图
2015/01/12 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
three.js实现圆柱体
2018/12/30 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
Python如何批量生成和调用变量
2020/11/21 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
领导干部作风建设剖析材料
2014/10/11 职场文书
2014年库房工作总结
2014/11/26 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
信息简报范文
2015/07/21 职场文书
领导干部学习心得体会
2016/01/23 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android