前端新手——stopPropagation(),preventDefault(),return false的区别

前端的同学相信对这三个方法都不会陌生，stopPrapagation()，preventDefault()，return false

stopPrapagation()方法。

先上一段代码：

。。。。。。。。。。。。。。

                     。。。。。。。。。。。

 先不说这段html代码的结构问题，只谈需求。博主在这里想实现点击span标签，弹出class="replyComment"的div，于是博主分分钟就写了一段jq代码：

	$('body,html').on('click' , '.item .extensionRight [rel="replyButton"]' , function(){
		var _this = $(this),
			post = _this.parents('.item'),
			reply = post.find('.replyComment ') ;
			reply.show();
	});

结果感人，div是出现了，可是紧跟就跳页面了，跳到index.html。然后博主仔细一看，少了个stopPrapagation()。因为事件可以在不同的节点中传播，不管是冒泡事件还是捕获事件，博主在js里没有限制点击事件只在span里，因此点击事件传播到了父节点(其实这段html代码本身结构就有问题。。。)，因此会产生跳转。

而stiopPropagation()方法的的官方解释为“ 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点”。说白了就是只限制在一个地方。

修改后的jq代码：

$('body,html').on('click' , '.item .extensionRight [rel="replyButton"]' , function(e){
		e.stopPropagation();//阻止冒泡
		var _this = $(this),
			post = _this.parents('.item'),
			reply = post.find('.replyComment ') ;
			reply.show();
	});

结果有效。

preventDefault()方法。

取消事件的默认动作。

这个方法 通知浏览器取消执行与事件关联的默认动作。如标签的地址跳转等:

W3School
preventDefault() 方法将防止上面的链接打开 URL。

return false方法。

对于这个方法，相信同学们一定不会陌生。在甚多时候，return false可以替代stopPropagation()和preventDefault()。

但是并不是所有的情况下都可以用return false来替代上两种方法。

因为return false方法： 不但阻止事件执行，而且会跳出，return false之后的所有事件都不会执行。