`
zhsq_java
  • 浏览: 61635 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

<a> 里面herf执行JS函数的处理办法,网上找的一个比较靠谱的,转下

    博客分类:
  • JS
阅读更多
a标签中调用javascript方法的几种方法:
我们常用的在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;"

看到有人又用了一种方法:a href="###" onclick="js_method();",挺好用的
分享到:
评论

相关推荐

    阻止 <a> 地址轉向

    然而,有时我们可能需要阻止 `&lt;a&gt;` 标签的默认行为,例如防止页面跳转或者在点击链接时执行特定的 JavaScript 代码。这种情况下,我们可以利用 `onclick` 事件或者其他方法来实现这一目标。 一、`onclick` 事件 `...

    " data-report-query="utm_medium=distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Rate-2-87701332-iteye_blog-1827435.nonecase&depth_1-utm_source=distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Rate-2-87701332-iteye_blog-1827435.nonecase" data-report-click='{"mod":"popu_708","dest":"https://download.csdn.net/download/weixin_51225684/87701332","strategy":"2~default~OPENSEARCH~Rate","extra":"{\"utm_medium\":\"distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Rate-2-87701332-iteye_blog-1827435.nonecase\"}"}' > 同步任务顺序: <li>1.console.log("script- 111");</li>

    ---然后跳出整个async1函数来执行后面js栈的代码&lt;/li&gt; &lt;li&gt;4.console.log("promise1-111");&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; 异步任务顺序: &lt;li&gt;1.回到async1函数中等待await后面表达式的返回值&lt;/li&gt; &lt;li&gt;2.promise的.then()...

    C#编程经验技巧宝典

    的值 52&lt;br&gt;&lt;br&gt;0069 求最大公约数 52&lt;br&gt;&lt;br&gt;0070 求最小公倍数 53&lt;br&gt;&lt;br&gt;0071 判断素数的算法 53&lt;br&gt;&lt;br&gt;0072 如何判断一个数是否是完数 54&lt;br&gt;&lt;br&gt;0073 歌德巴赫猜想的算法 54&lt;br&gt;&lt;br&gt;0074 八皇后...

    javascrip上百技术总集

    &lt;br&gt;js访问xml之节点对象属性和方法&lt;br&gt;js访问xml之删除一个book元素节点&lt;br&gt;js访问xml之添加一个book元素节点&lt;br&gt;【JS】兼容ff的加入收藏和设为首页&lt;br&gt;【补】【sina】绕过sina博客的限制,超级BT执行Javascript&lt;br...

    Windows 脚本技术参考手册

    > 元素&lt;br&gt; <description> 元素&lt;br&gt; <example> 元素&lt;br&gt; <job> 元素&lt;br&gt; <named> 元素&lt;br&gt; <object> 元素&lt;br&gt; <package> 元素&lt;br&gt; <reference> 元素&lt;br&gt; <resource> 元素&lt;br&gt; <runtime> 元素&lt;br&gt;...

    openssl编程

    249&lt;br&gt;31.4 数据结构 250&lt;br&gt;31.5 加密套件 251&lt;br&gt;31.6 密钥信息 252&lt;br&gt;31.7 SESSION 252&lt;br&gt;31.8 多线程支持 253&lt;br&gt;31.9 编程示例 253&lt;br&gt;31.10 函数 264&lt;br&gt;第三十二章 Openssl命令 267&lt;br&gt;32.1概述 267&lt;br&gt;...

    JavaScript学习笔记.pdf

    &lt;/p&gt;&lt;button type="button" onclick="myFunction()"&gt;点击这里&lt;/button&gt;&lt;script&gt;function myFunction(){document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";}&lt;/script&gt;&lt;/body&gt; 4、外部的 ...

    OpenSSL编程(三合一版).zip

    249&lt;br&gt;31.4 数据结构 250&lt;br&gt;31.5 加密套件 251&lt;br&gt;31.6 密钥信息 252&lt;br&gt;31.7 SESSION 252&lt;br&gt;31.8 多线程支持 253&lt;br&gt;31.9 编程示例 253&lt;br&gt;31.10 函数 264&lt;br&gt;第三十二章 Openssl命令 267&lt;br&gt;32.1概述 267&lt;br&gt;...

    javascript中BASE标签作用

    &lt;a href="properties/href_2.asp"&gt;关于href属性的更多信息&lt;/a&gt; &lt;!-- 更多内容 --&gt; &lt;/body&gt; &lt;/html&gt; ``` 在这个例子中,`&lt;base&gt;`标签设置的基准URL是`...

    SQL2005工作经验

    case在where条件中的应用;&lt;br&gt;SQL注入;...&lt;br&gt;SQL 2005新增的几个函数之学习;&lt;br&gt;多数据库查询;&lt;br&gt;利用NEWID函数来取随机记录;&lt;br&gt;利用ROW_NUMBER方法分页;&lt;br&gt;在数据库中处理字符串数组;&lt;br&gt;......

    jquery带二级下拉子栏目导航代码.zip

    &lt;li&gt;&lt;a href="#"&gt;&lt;img src="preview.png" alt="预览图"&gt;子菜单1-1&lt;/a&gt;&lt;/li&gt; ``` 然后在CSS中调整图片的相对位置,使其在鼠标悬停时显示在相应的菜单项旁边。 在实际应用中,可能还需要考虑其他细节,比如添加过渡...

    JavaScript执行顺序

    在这个例子中,`&lt;head&gt;`部分中的脚本将先于`&lt;body&gt;`部分中的脚本执行。这意味着“头部脚本”会在“页面脚本”之前弹出警告框。 **1.2 外部JavaScript文件的执行顺序** 除了直接内嵌在HTML文档中的脚本,还可以通过...

    用javascript写的windows资源管理器

    本功能在windows资源管理器都能轻易做到,相信没人用这个做资源管理器吧,呵呵~~&lt;br&gt;&lt;br&gt;主要是为了让javascript,DOM,CSS良好的呈现一种网页组织,真正的使&lt;br&gt;“结构”,“行为”,“样式”三者在(x)html里面完全...

    js弹出窗口示例

    &lt;script type="text/javascript" src="ymPrompt.js"&gt;&lt;/script&gt; &lt;br&gt;在页面中引入对应的皮肤文件的CSS,如:&lt;link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" /&gt; &lt;br&gt;根据您的需要调用相应的消息...

    a标签调用js的方法总结

    &lt;a&gt; 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。 这里的href=”[removed];” rel=”external nofollow” rel=”external ...

    JS调用插件函数,插件回调JS函数例子

    在上述示例中,`myPluginFunction`是插件暴露给JS的函数,它接受一个JS函数作为参数,这个函数将在插件处理完任务后被调用。`jsCallback`就是我们定义的回调函数,它会接收到插件处理的结果。 在插件端,`...

    html中a标签调用js函数.pdf

    在现代Web开发中,使用JavaScript进行交互性增强是常见做法,因此在`&lt;a&gt;`标签中调用JavaScript函数是十分普遍的。本文将详细介绍如何在`&lt;a&gt;`标签中调用JavaScript函数,并探讨不同方法的优缺点。 首先,让我们回顾...

    HTML5+CSS3+JS小实例:黑色的简约下拉菜单

    &lt;li&gt;&lt;a href="#"&gt;子菜单1-1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;子菜单1-2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; ``` CSS3则负责美化这个菜单,实现黑色背景、字体样式、鼠标悬停效果...

    计算机专业编译原理c0编译器实验代码及实验报告

    &lt;语句&gt;-&gt; &lt;条件语句&gt;|&lt;循环语句&gt; | '{'&lt;语句序列&gt;'}' | &lt;自定义函数调用语句&gt; | &lt;赋值语句&gt; | &lt;返回语句&gt; | &lt;读语句&gt; | &lt;写语句&gt; | ; &lt;条件语句&gt;-&gt;if '('&lt;表达式&gt;')' &lt;语句&gt; [else &lt;语句&gt; ] &lt;循环语句&gt;-&gt;while ...

Global site tag (gtag.js) - Google Analytics