阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

时间:2024-02-17 15:45:22

阻止a标签跳转四种方法 兼容各大浏览器(包括IE)

HTML

<!--第一种-->
<a href="javascript:;">我不会被跳转</a>
<!--第二种-->
<a href="javascript:void(0)">我不会被跳转</a>
<!--第三种-->
<a href="http://www.baidu.com" onclick="fn.skip_1();return false">我不会被跳转</a>
<!--第四种-->
<a href="http://www.baidu.com" onclick="fn.skip_2()">我不会被跳转</a>

Javascript

var fn = {
    skip_1: function() {
        console.log(\'我不会被跳转\');
    },
    skip_2: function() {
        //阻止冒泡
        console.log(\'我不会被跳转\')
        var event = event || window.event;
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
}

总结:上面四种方法都兼容ie浏览器,第三种、第四种方法较为灵活,可使用较多繁杂的场景