详解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 相关文章推荐
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
JS实现普通轮播图特效
Jan 01 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
原生JS实现京东查看商品点击放大
Dec 21 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
Python中title()方法的使用简介
2015/05/20 Python
python中的lambda表达式用法详解
2016/06/22 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python中数字是否为可变类型
2020/07/08 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
品德与社会教学反思
2016/02/24 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python