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

最新推荐文章于 2023-07-09 15:38:10 发布

王三麻子

最新推荐文章于 2023-07-09 15:38:10 发布

阅读量3.2k

点赞数 2

分类专栏：前端开发

本文链接：https://blog.csdn.net/W_l_l/article/details/47027131

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">前端的同学相信对这三个方法都不会陌生，stopPrapagation()，preventDefault()，return false</span>

stopPrapagation()方法。

先上一段代码：

<a href="index.html" class="nums comments-num fr_" style="color: #aaa;margin-right:-20px;">

          <span class="commonIcons replyIcon" rel="replyButton"></span>
</a>

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

<pre name="code" class="html"><div class="replyComment replyShow" id="118" style="display: none;">
                     。。。。。。。。。。。
</div>

先不说这段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里，因此点击事件传播到了父节点<a>(其实这段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()方法。

取消事件的默认动作。

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

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();
  });
});
</script>
</head>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>
</html>