详解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 相关文章推荐
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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 Stream_*系列函数
2010/08/01 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python实现的快速排序算法详解
2017/08/01 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python argparse模块使用方法解析
2020/02/20 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
2015团员个人年度总结
2015/11/24 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL