阻止a标签默认行为的几种简单方法

  • a 标签的 href 标签属性的属性值为以 # 开头 且 # 后有它非空格字符 的 字符串，#是标签内置的一个方法，点击 a 标签不会触发加载资源，但回返回到页面顶 
<a href="##"></a>
 <a href="#任何字符串"></a>
  • a 标签的 href 标签属性的属性值为以 javascript: 开头 且 javascript: 后面的代码没有返回任何东西 或者 返回为 undefined 、 null 、 void 或者 void表达式 
<a href="javascript:"></a>
<a href="javascript:undefined"></a>
<a href="javascript:null"></a>
<a href="javascript:void"></a>
<a href="javascript:void()"></a>
<a href="javascript:void(0)" ></a>
  • 事件处理函数的工作机制中，在给某元素添加事件处理函数后，一旦事件发生，相应JavaScript代码就会执行，所调用的JavaScript代码的返回值被传递给事件处理函数。当我们给a标签添加onclick事件处理函数并点击a触发其后，
    如果相应JavaScript代码返回true，onclick事件处理函数就会认为这个链接呗点击了，同样的若返回false即会认为链接 
<a href="http://www.baidu.com" οnclick=" myjs(); return false; ">   Click Me   </a>  
<a href="http://www.baidu.com" οnclick=" return false; ">  Click Me  </a>
  • 当点击a标签时，JavaScript代码返回值为false，故此链接默认行为未被触发。

preventDefault()阻止事件的默认行为但不支持IE，所以在IE中使用returnValue阻止事件默认行为   

<a href="http://www.baidu.com" id="test">  Click Me  </a> 
<script type="text/javascript">
    var test = document.getElementById('test');

    function stopDefault(e) {
        if (e && e.preventDefault)
            e.preventDefault();
        else
            window.event.returnValue = false;
    }
    test.onclick = function (e) {
        stopDefault(e);
    }
</script>

href 与 onclick 的区别

在Javascript中void是一个操作符，该操作符指定要计算一个表达式，但是不返回值，void 操作符用法格式如下：

javascript:void(expression) 
javascript:void expression

expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯

下面代码创建了一个超链接，当用户点击以后不会发生任何事。当用点击户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果

<a href="javascript:void(0);">单击此处什么也不会发生</a>

 

下面的代码创建了一个超级链接，用户单击时会提交表单

<a href="javascript:void(document.form.submit());">单此处提交表单</a>

下面代码则执行了subgo() 函数，在这里，javascript:void(0)，没起实质上的作用，它仅仅是一个死链接，执行的函数是subgo()。

<a href="javascript:void(0);" onclick="subgo();">点我</a>
<a href="#" onclick="subgo();">点我</a>与<a href="javascript:void(0);" onclick="subgo();">点我</a>的区别
实际上 # 包含了一个位置信息，默认的锚是#top ，也就是网页的上端 ，而 javascript:void(0); 仅仅表示一个死链接，没有任何信息。所以调用脚本的时候最好用void(0)

如果链接中同时有，href 属性函数和 onclick 事件函数，那到底执行那个呢？

<a href="javascript:subgo2();" onclick="subgo();">点我</a>

链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）； 

假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值，一般是这样写οnclick="xxx();return false;" 。

<a href="javascript:subgo2();" onclick="subgo(); return false;">点我</a>

如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 #，这可以防止不必要的页面跳动； 

如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；

 

 

js返回上一页的几种实现方法

window.history.go(-1);  //返回上一页
window.history.back();  //返回上一页
//如果要强行刷新的话就是：window.history.back();location.reload();
 
window.location.go(-1); //刷新上一页

使用history.length判断是否有上一页面，如果没有就返回到指定页面，一般是返回到首页

function goBack(){
    if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ // IE
        if(history.length > 0){
            window.history.go( -1 );
        }else{
            window.location.href = "/";
        }
    }else{ //非IE浏览器
        if (navigator.userAgent.indexOf('Firefox') >= 0 ||
            navigator.userAgent.indexOf('Opera') >= 0 ||
            navigator.userAgent.indexOf('Safari') >= 0 ||
            navigator.userAgent.indexOf('Chrome') >= 0 ||
            navigator.userAgent.indexOf('WebKit') >= 0){
 
            if(window.history.length > 1){
                window.history.go( -1 );
            }else{
                window.location.href = "/";
            }
        }else{ //未知的浏览器
            window.history.go( -1 );
        }
    }
}