jquery事件函数和原生事件绑定函数中return false的区别

一直听说jquery中事件函数返回false,相当于调用了event.preventDefault()和event.stopPropagation()两个方法,

今天就想看看dom中0级、1级、2级事件绑定事件的话,事件函数返回false会是个什么情况,看看是不是和jquery一个样;

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<script>

function a(){

console.log("body");

}

function b(event){

console.log("div");

return false;

}

</script>

</head>

<body onclick='a();'>

<a href='http://www.baidu.com' onclick='return b();'>aaaa</a>

</body>

</html>

运行之后发现打印div和body,但是不会跳转到百度,所以0级dom事件的return false只是阻止了默认事件,和jquery 的不同

再来看看1级dom事件

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<script>

function a(){

console.log("body");

}

function b(event){

console.log("div");

return false;

}

function load(){

document.body.onclick = a;

document.getElementsByTagName("a")[0].onclick = b;

}

</script>

</head>

<body onload='load();'>

<a href='http://www.baidu.com'>aaaa</a>

</body>

</html>

运行之后发现打印div和body,但是不会跳转到百度,所以1级dom事件的0级dom事件函数中的return false含义一样,只是阻止了默认事件,和jquery 的不同

再来看看2级dom事件

<!doctype html>

<html>

<head>

<meta charset='utf-8' />

<script>

function a(){

console.log("body");

}

function b(event){

console.log("div");

return false;

}

function load(){

document.body.addEventListener("click",a,false);

document.getElementsByTagName("a")[0].addEventListener("click",b,false);

}

</script>

</head>

<body onload='load();'>

<a href='http://www.baidu.com'>aaaa</a>

</body>

</html>

运行之后发现打印div和body,并且会跳转到百度,所以2级dom事件函数中的return false什么事情也没做,和jquery不同