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 相关文章推荐
jquery判断浏览器类型的代码
Nov 05 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
非常不错的MySQL优化的8条经验
2008/03/24 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
js实现选项卡效果
2020/03/07 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python模仿网页版微信发送消息功能
2018/02/24 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python解析yaml文件过程详解
2019/08/30 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
法人代表授权委托书
2014/04/08 职场文书
投标售后服务承诺书
2015/04/29 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python