a 标签点击事件方法汇总
<a > 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL, 包括片段标识符和 JavaScript 代码段.
这里的 href="javascript:;", 其中 JavaScript: 是伪协议, 它可以让我们通过一个链接来调用 JavaScript 函数. 而采用这个方式 JavaScript:; 可以实现 A 标签的点击事件运行时, 如果页面内容很多, 有滚动条时, 页面不会乱跳, 用户体验更好.
1. a href="javascript:js_method();"
这是平台上常用的方法, 但是这种方法在传递 this 等参数的时候很容易出问题, 而且 JavaScript: 协议作为 a 的 href 属性的时候不仅会导致不必要的触发 Windows.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 的作用. 所以用这种方法点击后网页后返回到页面的最顶端.
- <a href="#">
- </a>
- 如果页面有滚动条 点击后网页后返回到页面的最顶端 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;" 我们常用的在 a 标签中有点击事件:
a href="javascript:js_method();"
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 html+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/cb6290c9357b