首页 > 代码库 > 伪链接实现方法记录

伪链接实现方法记录

2024-07-02 18:35:53   225人阅读

　　链接一般作为页面跳转的手段，但是有时候需要使用链接形式，来实现ajax请求（非直接的页面跳转），或者来实现特殊的页面动画效果（点击链接，一段文字展开和收起）。

　　总结起来有以下三种方法：

　　1、给href属性设置#，使得页面保持在当前页面， 但是页面位置会跳转到顶部，除非使用锚点跳转到特殊位置。

    <a href="#">click here(#)</a><br/>

 

　　2、使用javascript伪协议，给href属性设置 javascript:void(0)，详情见下面网页介绍

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void

按照介绍是， 借助javascript:之后的最后一个表达式的值是否为undefined来判断是否可以跳转，如果是不能跳转，否则能跳转。

    <a href="javascript:void(0);" target="blank">click here(javascript:void(0);)</a><br/>
    <a href="javascript:undefined;" target="blank">click here(javascript:undefined;)</a><br/>


    <a href="javascript:void(0);‘not undefined‘;" target="blank">click here(javascript:void(0);‘not undefined‘;)</a><br/>
    <a href="javascript:‘not undefined‘;void(0);" target="blank">click here(javascript:‘not undefined‘;void(0);)</a><br/>

　　最后一个表达式值得测试方法如下面：

         <script type=‘text/javascript‘> 
         alert(eval("‘not undefined‘;void(0);"))
         alert(eval("void(0);‘not undefined‘;"))
         </script>

 

　　3、直接架空href属性的作用， 在onclick属性中， 添加return false语句，这个语句会截止链接的原生行为，即href属性失效。

    <a href="#" onclick="return false;" target="blank">click here(onclick="return false;")</a><br/>

　　原理见《Javascript Best Practices》说明，http://www.javascripttoolbox.com/bestpractices/#onclick

The javascript code that runs within the onclick handler must return true or false (or an expression than evalues to true or false) back to the tag itself - if it returns true, then the HREF of the anchor will be followed like a normal link. If it returns false, then the HREF will be ignored. This is why "return false;" is often included at the end of the code within an onclick handler.

 

　　最佳实践推荐使用 onclick 替换 javascript伪协议，来触发待执行的javascript代码。 这样做可以维持链接语义，在href中应该设置为页面地址URL， 支持浏览器平稳退化。

When you want to trigger javascript code from an anchor <A> tag, the onclick handler should be used rather than the javascript: pseudo-protocol. 

 

下面给出完整测试代码：

<html>
<head> 
         <style>
                 
         </style>
</head> 
<body>
    <a href="" target="blank">click here(normal archor)</a><br/>

    <a href="#">click here(#)</a><br/>


    <a href="javascript:void(0);" target="blank">click here(javascript:void(0);)</a><br/>
    <a href="javascript:undefined;" target="blank">click here(javascript:undefined;)</a><br/>


    <a href="javascript:void(0);‘not undefined‘;" target="blank">click here(javascript:void(0);‘not undefined‘;)</a><br/>
    <a href="javascript:‘not undefined‘;void(0);" target="blank">click here(javascript:‘not undefined‘;void(0);)</a><br/>


    <a href="#" onclick="return false;" target="blank">click here(onclick="return false;")</a><br/>

         <script type=‘text/javascript‘> 
         //alert(eval("‘not undefined‘;void(0);"))
         //alert(eval("void(0);‘not undefined‘;"))
         </script>
</body>
</html>

 

 


联系
我们