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入门教程(11) js事件处理
Jan 31 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
js里面的变量范围分享
2020/07/18 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python自定义一个异常类的方法
2019/06/27 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python getopt模块使用实例解析
2019/12/18 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
公司拓展活动方案
2014/02/13 职场文书
八月迷情观后感
2015/06/11 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书