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

最新推荐文章于 2024-11-05 22:07:06 发布

weixin_30621919

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量66

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jiangtuzi/p/4112221.html

版权

一直听说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 οnclick='a();'>
<a style='width:200px;height:200px;background:red;display:block;' href='http://www.baidu.com' οnclick='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 οnlοad='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 οnlοad='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不同