欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阻止a标签默认事件的几种简单方法

程序员文章站 2024-03-18 18:37:58
...

第一种: <a href = " javascript: void ( 0 ); ">百度</a> 或者<a href = " javascript:; ">百度</a>

测试:(可行)

<a href="javascript:void(0);" onclick="myjs()">百度</a>
<a href="javascript:;" onclick="myjs()">百度1</a>
<script type="text/javascript">
    function myjs(){
        alert("a标签默认事件被阻止,执行js函数");
    }
</script>

第二种:<a href = " # ">百度</a> (最常见的,但是点击后页面会返回到顶部,不可用);所以又有了<a href = " ## ">百度</a>或者<a href = " #! ">百度</a>

测试:

<div id="test" style="width: 1000px; height: 1300px; background: rgb(56,132,63)"></div>
<a href="#" onclick="myjs()">百度</a> <!--不可行(执行js函数后页面会返回到顶部)-->
<a href="##" onclick="myjs()">百度1</a> <!--测试未发现问题-->
<a href="#!" onclick="myjs()">百度2</a> <!--测试未发现问题-->
<script type="text/javascript">
    function myjs(){
        alert("a标签默认事件被阻止,执行js函数");
    }
</script>

第三种: e.preventDefault();阻止默认事件(不支持IE),IE中用window.event.returnValue = false; 阻止默认事件

测试:(可兼容IE)

<a id="test" href="http://www.baidu.com">百度</a>
<script type="text/javascript">
    //声明并获取element
    var test = document.getElementById("test");
    //阻止默认事件函数
    function stopDefault(e) {
        if (e && e.preventDefault)
            e.preventDefault();
        else
            window.event.returnValue = false; //兼容IE
    }
    //自定义函数
    function myjs(){
        alert("阻止默认事件,执行自定义函数");
    }
    //element点击阻止默认事件并执行自定义函数
    test.onclick =  function(e){
        stopDefault(e);
        myjs();
    }
</script>