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 style='width:200px;height:200px;background:red;display:block;' 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 style='width:200px;height:200px;background:red;display:block;' 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 style='width:200px;height:200px;background:red;display:block;' href='http://www.baidu.com'>aaaa</a>
</body>
</html>
运行之后发现打印div和body,并且会跳转到百度,所以2级dom事件函数中的return false什么事情也没做,和jquery不同