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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
Javascript 面向对象之重载
May 04 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php之XML转数组函数的详解
2013/06/07 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Python异常处理总结
2014/08/15 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python实现的系统实用log类实例
2015/06/30 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Python类的动态绑定实现原理
2020/03/21 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
法制宣传月活动方案
2014/05/11 职场文书
节约用电标语
2014/06/17 职场文书
公司酒会主持词
2015/07/02 职场文书
英语教学课后反思
2016/02/15 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
基于Python实现对比Exce的工具
2022/04/07 Python
如何通过cmd 连接阿里云服务器
2022/04/18 Servers