在JS中a标签加入单击事件屏蔽href跳转页面


Posted in Javascript onDecember 16, 2016

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

1.

a href="JavaScript:js_method();"

这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

2.

a href="javascript:void(0);" onclick="js_method()"

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.

a href="javascript:;" onclick="js_method()"

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

4.

a href="#" onclick="js_method()"

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

5.

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

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

我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。

综合上述,在a中调用js函数最适当的方法推荐使用:

a href="javascript:void(0);" onclick="js_method()"
a href="javascript:;" onclick="js_method()"
a href="#" onclick="js_method();return false;"

解释:

javascript:是伪协议,表示url的内容通过javascript执行。 void(0)表示不作任何操作,这样会防止链接跳转到其他页面。 这么做往往是为了保留链接的样式,但不让链接执行实际操作,具体的操作交给链接的onclick事件处理.

以上所述是小编给大家介绍的在JS中a标签加入单击事件屏蔽href跳转页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript游戏之优化篇
Nov 08 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
原生javascript实现分页效果
Apr 21 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
js实现坦克大战游戏
Feb 24 Javascript
概述jQuery中的ajax方法
Dec 16 #Javascript
JS数组排序方法实例分析
Dec 16 #Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 #Javascript
详解jQuery简单的表单应用
Dec 16 #Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 #Javascript
简单三步实现报表页面集成天气
Dec 15 #Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
js简易版购物车功能
2017/06/17 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python 实现单例模式的5种方法
2020/09/23 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
opencv实现图像几何变换
2021/03/24 Python
家长会标语
2014/06/24 职场文书
意向协议书
2015/01/27 职场文书
2015年化验室工作总结
2015/04/23 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python