详解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 相关文章推荐
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jquery手风琴特效插件
Feb 04 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
调试php程序的简单步骤
2019/10/04 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
财务经理岗位职责
2013/11/09 职场文书
给医务人员表扬信
2014/01/12 职场文书
检讨书格式
2015/01/23 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python