[转]html里a标签中href调用js的几种方法

文章转自: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>

原文地址:https://www.cnblogs.com/sungong1987/p/11130252.html

时间: 2024-08-28 13:36:12

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

a 中调用js的几种方法

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

Magento中,调用静态块的几种方法[magento 二次开发]

在后台创建一个order_form静态块 Block Title :Order Form Identifier :order_form Status :Enabled Content :自定义内容 1.如果要在.phtml文件中直接调用这个静态块,那可以采用以下方法 [php] view plaincopy <?php $block = Mage::getModel('cms/block') ->setStoreId(Mage::app()->getStore()->getId()

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

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

[转]a 标签中调用js的几种方法

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

a标签调用js的几种方法

我们常用的在a标签中有点击事件: <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. 这里的href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好1. a

Magento中,调用静态块的几种方法

在后台创建一个order_form静态块Block Title :Order FormIdentifier :order_formStatus :EnabledContent :自定义内容 1.如果要在.phtml文件中直接调用这个静态块,那可以采用以下方法 [php] view plaincopy <?php $block = Mage::getModel('cms/block') ->setStoreId(Mage::app()->getStore()->getId()) -&

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

原文:Html A标签中 href 和 onclick用法.区别.优先级别 如果不设置 href属性在IE6下面会不响应hover.双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题).  代码如下 复制代码 <a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值. 所以,比较推荐的写法是  代码如下 复制代

a标签href调用js方法的问题

<!--<a href="javascript:secondThreadReply(this,1)" onclick="javascript:secondThreadReply(this,1);">回复</a>--> function secondThreadReply(this,1){ alert(obj); } 通过href调用js方法,如果传递参数this,js里获取到的并不是a标签对象,而是[object window]对

a标签中href=&quot;#xxx&quot;跳到id=&quot;xxx&quot;

HTML中a标签中href="#xxx",当点击后,页面会跳转到标签中id="xxx"的地方. 同时,在URL上的后面会看到加上了#xxx,这样直接改变URL中#后面的值,然后页面就可以跳转到标签中id为这个值的地方. 测试代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>