详解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的IE和Firefox兼容性集锦
Dec 11 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php实现httpRequest的方法
2015/03/13 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
vue-router传参用法详解
2019/01/19 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Python中的sort()方法使用基础教程
2017/01/08 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
什么是python的列表推导式
2020/05/26 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
岳麓书院导游词
2015/02/03 职场文书
身份证丢失证明
2015/06/19 职场文书
追讨欠款律师函
2015/06/24 职场文书
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL