文章转自：https://blog.csdn.net/best_luxi/article/details/45062301

我们常用的在a标签中有点击事件： 
1. a href=”javascript:js_method();”

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

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;”

示例代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-Type" content="text/html" charset="utf-8">

  <title>浏览器对象</title>

</head>

<body>

   <h2>操作成功</h2>

   <span id="time">5</span>秒后回到主页<a href="javascript:goBack()">返回</a>

 <script type="text/javascript">

    var i = 5;

    var t = setInterval(function clock(){

    i--;

    time.innerHTML= i;

    if (i==1) {

      window.location.assign("http://www.sina.com");

    }

  } ,1000);

  function goBack(){

      varwindow.history.back();

  }

 </script>

</body>

</html>
  1. <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta http-equiv="content-Type" content="text/html" charset="utf-8">
  5.  
    <title>浏览器对象</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <h2>操作成功</h2>
  9.  
    <span id="time">5</span>秒后回到主页<a href="javascript:goBack()">返回</a>
  10.  
     
  11.  
    <script type="text/javascript">
  12.  
    var i = 5;
  13.  
    var t = setInterval(function clock(){
  14.  
    i--;
  15.  
    time.innerHTML= i;
  16.  
    if (i==1) {
  17.  
    window.location.assign("http://www.sina.com");
  18.  
    }
  19.  
    } ,1000);
  20.  
     
  21.  
    function goBack(){
  22.  
    varwindow.history.back();
  23.  
    }
  24.  
     
  25.  
    </script>
  26.  
    </body>
  27.  
    </html>

[转]html里a标签中href调用js的几种方法的更多相关文章

  1. a 标签中调用js的几种方法 文章摘自他人

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  2. a 标签中调用js的几种方法

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问 ...

  3. a标签中调用js的几种方法

    1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议 ...

  4. a 中调用js的几种方法

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  5. a标签调用js的几种方法

    我们常用的在a标签中有点击事件: <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScrip ...

  6. Magento中，调用静态块的几种方法

    在后台创建一个order_form静态块Block Title :Order FormIdentifier :order_formStatus :EnabledContent :自定义内容 1.如果要 ...

  7. JS中的phototype JS的三种方法（类方法、对象方法、原型方法）

    JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...

  8. Html A标签中 href 和 onclick用法、区别、优先级别

    原文:Html A标签中 href 和 onclick用法.区别.优先级别 如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题). ...

  9. A标签中 href 和 onclick用法、区别、优先级别

    (内容摘自:https://blog.csdn.net/chenchunlin526/article/details/77346049) Html A标签中 href 和 onclick 同时使用的问 ...

随机推荐

  1. Hadoop_18_MapRduce 内部的shuffle机制

    1.Mapreduce的shuffle机制: Mapreduce中,map阶段处理的数据如何传递给Reduce阶段,是mapreduce框架中最关键的一个流程,这个流程就叫shuffle 将mapta ...

  2. storm 的分组策略深入理解（-）

    目录 storm的分组策略 根据实例来分析分组策略 common配置: Shuffle grouping shuffle grouping的实例代码 ShuffleGrouping 样例分析 Fiel ...

  3. 记一次引用maven插件报错解决方法

    1.报错信息如图: plugin org.springframework.boot:spring-boot-maven-plugin not found 2.解决方案: maven的配置文件[sett ...

  4. 小白老凯，初出茅庐！请多关照！简单分享一些 mysql 数据库的安装操作！请给为大神雅正！

    在我们写代码,存储数据时常常会用到各种数据库,如:mysql.access.sql.server.Oracle等等,在这里就说一下mysql数据库的的操作指令! 首先我们了解下如何安装mysql数据库 ...

  5. Ubuntu系统---WeChat安装

    Ubuntu安装微信教程 工具/原料 ubuntu 14.04 x86 方法/步骤 这次我用的系统是Ubuntu 14.04 x86,在网上先去下载electronic-wechat-linux ht ...

  6. 如何给mysql数据库添加一个用户

    首先以root身份登录到MySQL服务器中. $ mysql -u root -p 当验证提示出现的时候,输入MySQL的root帐号的密码. 创建一个MySQL用户 使用如下命令创建一个用户名和密码 ...

  7. IntelliJ IDEA + Maven iml文件中依赖项的需求是什么？

    在Maven中,项目的依赖关系在pom.xml文件中指定.在IntelliJ IDEA中,即使对于Maven项目,相同的信息也存储在iml文件中.在两个地方有相同的信息需要什么? 当导入Maven项目 ...

  8. C. Vasily the Bear and Sequence Codeforces 336C(枚举，思维)

    C. Vasily the Bear and Sequence time limit per test 1 second memory limit per test 256 megabytes inp ...

  9. Java:应用Observer接口实践Observer模式

    本文出自“子 孑” 博客,原文链接:http://zhangjunhd.blog.51cto.com/113473/68949 在Java中通过Observable类和Observer接口实现了观察者 ...

  10. laravel常用响应操作