js阻止默认事件,如a标签跳转和事件冒泡

zhaozhipeng 2021-08-21 原文

禁止a标签点击跳转

在事件执行过程中使用 return false 提前终止事件，例：

<a href="http://baidu.com" onclick="return fasle">点我啊</a>

原理是当点击a标签时首先触发onclick函数，然后才执行href的跳转。但是在执行到return false的时候直接终止了执行，也就没有了链接的跳转。

目前疑问是return false 和 return true 以及 return的作用都是结束当前函数的执行并分别返回 false, true, undefined。但是如果把a标签onclick函数换成return 或return true后还是会执行页面跳转的。

因此，初步推断当执行完onclick事件后会根据返回值进行下一步操作，比如如果是false就终止当前事件的继续执行。

当然还可以通过这样设置 href=”javascript:void(0);” 来防止超链接跳转。

阻止默认事件以及事件冒泡

禁止事件传输过程中的冒泡，IE和其它浏览器的方式不同，代码如下:

var evt = evt || window.event; //获取event对象
    if (evt.preventDefault) {
        evt.preventDefault(); //非IE浏览器
 　　} else {
        evt.returnValue = false; //在早期的IE版本中
　　}
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //阻止事件冒泡