详解a标签添加onclick事件的几种方式


Posted in Javascript onMarch 29, 2019

我们常用的在a标签中有点击事件:

1. a href="javascript:js_method();" 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" onclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

综合上述,在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" onclick="js_method()"

a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

以上所述是小编给大家介绍的a标签添加onclick事件的几种方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
lib.utf.js
Aug 21 Javascript
可以将word转成html的js代码
Apr 11 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
浅谈js闭包理解
Mar 28 #Javascript
微信小程序中转义字符的处理方法
Mar 28 #Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 #Javascript
详解Js里的for…in和for…of的用法
Mar 28 #Javascript
ES7之Async/await的使用详解
Mar 28 #Javascript
You might like
php基础知识:控制结构
2006/12/13 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php如何连接sql server
2015/10/16 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
JavaScript版代码高亮
2006/06/26 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
为python设置socket代理的方法
2015/01/14 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python实现猜数游戏
2020/03/27 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
保密工作责任书
2014/04/16 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
HAM-2000摩机图
2021/04/22 无线电
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记