return false相当于preventDefault + stopPropagation？

最新推荐文章于 2021-09-13 11:07:08 发布

iteye_20966

最新推荐文章于 2021-09-13 11:07:08 发布

阅读量112

点赞数

分类专栏： JavaScript 文章标签： IE jQuery JavaScript Google HTML ViewUI

本文链接：https://blog.csdn.net/iteye_20966/article/details/81724949

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

有如下代码：

<html>
	<head>
		<script src='jquery-1.3.2.js'></script>
		<script>
			$(function(){
				$('li:has(ul)').click(function(e){
					alert($(this).attr('name'));
				});
			})
		</script>
	</head>
	<body>
		<ul>
			<li name='li1'>li1
				<ul>
					<li name='li1.1'>li1.1</li>
					<li name='li1.2'>li1.2</li>
					<li name='li1.3'>li1.3
						<ul>
							<li>1.3.1</li>
							<li>1.3.2</li>
						</ul>
					</li>
				</ul>
			</li>
			<li name='li2'>li2</li>
		</ul>
	</body>
</html>

当我点击1.3.1的时候，由于li1.3.1没有子节点ul，不满足:has(ul)的条件，所以li1.3.1本身没有注册onclick事件。但由于事件会冒泡，往上传递到li1.3，再往上还会传递到li1，这两个li都有子节点ul，所以会响应onclick事件。

当我们在做一个可折叠的列表的时候，这样冒泡的传递事件是会出问题的：我们并不希望在点击子节点的时候父节点跟着响应，所以我首先想到的是在alert($(this).attr('name'));后面添加一句e.stopPropagation();。

可是我看到书上的做法并不是这样，书上的做法是直接return false;。在我的印象中，return false跟e.preventDefault()是划等号的。可是我试了一下return false，果然有阻止事件传递的效果。我想如果return false可以阻止事件传递，那event.preventDefault()是不是也有同样的效果呢？于是又试着把return false用e.preventDefault()替换了，但结果是preventDefault()方法起不到阻止事件传递的效果。

这样是不是可以说：return false的作用是在阻止与事件相关的默认动作的同时阻止事件的传播。也就是return false相当于preventDefault + stopPropagation？

可是[quote="《JavaScript权威指南》Page 416"]在2级DOM API中，可以调用preventDefault()方法，与在0级事件模型中返回false一样。[/quote]

google了一把，又有人这么说：
[url]http://www.nabble.com/event.preventDefault()-seems-to-fail-td20026412s27240.html[/url]
[quote="Choan Gálvez"]- `return false` prevents the default action and stops the event
propagation.[/quote]

我想知道这个return false到底是怎么一回事。