在JS中a标签加入单击事件屏蔽href跳转页面
我们常用的在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跳转页面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了Bootstrap进度条、媒体对象实例详解,进度条包括基础进度条，多彩进度条，条纹状进度条等内容，具体实现代码大家参考下本文2017-03-03
这篇文章主要为大家详细介绍了JavaScript SHA512加密算法代码，具有一定的参考价值，感兴趣的朋友可以参考一下2016-10-10
本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了配置eslint规范项目代码风格，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最近公司有个需求,第一次遇到,把原生的微信小程序代码转换为uni-app项目,下面这篇文章主要给大家介绍了关于微信小程序转换uniapp的迁移步骤以及遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了JS实现图片瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了JavaScript的数据类型以及数据类型的转换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本文主要介绍了js实现华丽的九九乘法表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了微信小程序实现活动报名登记,本篇将介绍使用微信小程序实现发起一个活动报名的设计，以此为基础，我们可以掌握微信小程序表单的基本用法，进而在诸如疫情信息登记、出入报备等场景中使用小程序进行开发，满足相关的需求，需要的朋友可以参考下2022-09-09
今天无事逛网，突然发现了一个很有趣的事情，（也许只有我觉得有趣）.我看到一图片竟然在我拖动滚动条的时候没有动，也许你会说我少见多怪，不信你去找个这样的我看看，很少有的，一般的都是一拖动图片就在那跳得厉害。2010-01-01
最新评论