在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 继承实现方法
Aug 26 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
使用svg实现动态时钟效果
Jul 17 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 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
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
关于react中组件通信的几种方式详解
2017/12/10 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
Python实现的桶排序算法示例
2017/11/29 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
通过python检测字符串的字母
2020/02/18 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
房屋继承公证书
2014/04/10 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
正则表达式拆分url实例代码
2022/02/24 Java/Android