阻止a链接跳转的点击事件

 

<a href="http://www.baidu.com" id="btn">按钮</a>
<script>
    document.getElementById('btn').onclick = function () {
        console.log('执行要发生的事件逻辑');
    }
</script>

上述代码中，点击按钮，就会跳转到新的页面。想要阻止页面的跳转：

在事件函数最后添加一句 return false

<a href="http://www.baidu.com" id="btn">按钮</a>
<script>
    document.getElementById('btn').onclick = function () {
        console.log('执行要发生的事件逻辑');
        return false;
    }
</script>

 也可以在行内绑定这样做：

<a href="http://www.baidu.com" id="btn" onclick="fn();return false;">按钮</a>
<script>
    function fn() {
        console.log('执行要发生的事件逻辑');
    }
</script>