a标签Js的几种调用方法

最新推荐文章于 2024-04-19 11:25:38 发布

jattxgt

最新推荐文章于 2024-04-19 11:25:38 发布

阅读量9.6k

点赞数 3

分类专栏： js 文章标签： js a标签超链接 js常用调用方法

本文链接：https://blog.csdn.net/qq_38555490/article/details/89839990

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Js的几种调用方法（参考总结的）

众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a href="javascript:;"></a>，所以就来整理下a标签中href的几种用法。

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，页面不发生跳转，执行后还是在页面的当前位置。

综合上述，在a中调用js函数最适当的方法推荐使用：

<a href="javascript:void(0);" onclick="js_method()"></a>
<a href="javascript:;" onclick="js_method()"></a>
<a href="#" onclick="js_method();return false;"></a>

代码示例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
      <p><a href="http://www.baidu.com">href="http://www.baidu.com"</a></p>

     
      <!-- 1、a href="javascript:js_method();"
       这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候，
      不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。
      W3C标准不推荐在href里面执行javascript语句
       -->
      	<p><a href="javascript:method1()">href="javascript:method1()"</a></p>
     
 
      <!--2、 a href="javascript:void(0);" οnclick="js_method()" 
         这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。
         而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
      -->
		<p><a href="javascript:void(0);" onclick="method2()">href="javascript:void(0);" onclick="method2()"</a></p>
 
     
 
      <!-- 3、a href="javascript:;" οnclick="js_method()"
         这种方法跟跟2种类似，区别只是执行了一条空的js代码。   
       -->
		<p><a href="javascript:;" onclick="method3()">href="javascript:;" οnclick="method3()"</a></p>
 
     
 
      <!-- 4、a href="#" οnclick="js_method();return false;"      
      这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
       -->
		<p><a href="#" onclick="method4();return false">href="#" οnclick="method4();return false;"</a></p>
 
      

      <!-- 5、a href="#" οnclick="js_method()"
       这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
       -->
	  <div style="width: auto; height: 1000px;"></div>	
      <p><a href="#" οnclick="method3()">返回顶部</a></p>
 
     
     
   </body>
   <script>
      function method1(){
         alert(111);
      }
 
      function method2(){
         alert(222);
      }

      function method3(){
         alert(333);
      }

      function method4(){
         alert(444);
      }
   </script>
</html>

jattxgt

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
a标签Js的几种调用方法

Js的几种调用方法（参考总结的）众所周知，a标签的最重要功能是实现超链接和锚点。而且，大多数人认为a标签最重要的作用是实现超链接，今天我刚好碰到a标签的一种写法<a href="javascript:;"></a>，所以就来整理下a标签中href的几种用法。 1、a href="javascript:js_method();" 这是常用的方法...
复制链接

扫一扫