文章转自：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. es的相关知识二（检索文档）

    一.es的使用 1.检索文档: 想要从Elasticsearch中获取文档,我们使用同样的 _index  . _type  . _id  ,但是HTTP方法改为 GET  : GET /{index ...

  2. celery的简单使用

    一   安装celery #首先进行一些简单配置 pip install celery apt-get install erlang apt-get install rabbitmq-server 二 ...

  3. fonts/font-awesome-woff2 404问题

    报错环境: vue 开发的项目 npm 引入的font-awesome, 页面正常显示,就是控制台会报这个错误 产生原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS ...

  4. flyio 的请求封装

    1.安装flyio.js npm install flyio --save-dev 2.在util创建一个fly.js用于封装 import Vue from 'vue' var Fly=requir ...

  5. ProjectEuler215 Crack-free Walls

    易知状态不会太多(\(3329\)个),直接搜一下,按照能不能连在后面建边,跑一遍dp即可 #include <bits/stdc++.h> using namespace std; st ...

  6. ios的uc浏览器图片加载不出来原因

    最近做一个落地页发现一个在ios设备上uc浏览器的bug 在uc浏览器开启广告过滤的时候,会把图片过滤掉,无论是背景图还是img标签加载的图片 经过搜索与实验,发现广告过滤的设置关掉就可以,可是一般情 ...

  7. IO编程之序列化

    转载地址:https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138683221 ...

  8. 莫比乌斯函数介绍&&基础

    定义 设正整数$N$按照算术基本定理分解质因数为$N=p_1^{c_1}p_2^{c_2} \cdots P_m^{c_m}$,定义函数: $$\mu(N)= \left\{\begin{matrix ...

  9. BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊 (LCT维护深度)

    要维护深度,就维护一下size就行了.access一下x,那么从根->x这一条链就独立成为一棵splay,那么splay的size节点数就是x的深度. 删边的时候直接access一下,splay ...

  10. @GetMapping、@PostMapping、@PutMapping、@DeleteMapping、@PatchMapping、@RequestMapping详解

    最近写项目中突然发现有人再controller层写@PostMapping,这对于经常用@RequestMapping的我来说,感到跟奇怪,网上搜寻了一些资料,特在此整合一下: Spring4.3中引 ...