jQuery取消子元素继承父元素的事件

最新推荐文章于 2022-03-03 14:21:50 发布

weixin_34352449

最新推荐文章于 2022-03-03 14:21:50 发布

阅读量541

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/kangweb/blog/1635403

本文介绍了一个常见的JavaScript问题：如何阻止子元素点击事件触发父元素事件。通过一个具体例子，展示了如何使用return false来解决事件冒泡的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

子元素继承父元素的事件在大部分时候对我们来说很好，而且相当有用，但是它同时也是把双刃剑，比如我点击父元素执行一个动作，但是我下面想点击子元素的时候恢复点击父元素之前的状态，这时麻烦就来了，它会先执行点击子元素所触发的事件然后紧接着会触发父元素的事件，可能看着前面的这段话有点绕，那么我们举例说明：

javascript代码：

<script type="text/javascript">
	$(document).ready(function(){
		$(".box").click(function(){
			$(this).animate({"width":"300px"});
		})
		$(".button").click(function(){
			$(this).parent().animate({"width":"100px"});
		});
	})
</script>

html代码：

<div class="box">
	<div class="button">恢复点击前的宽度</div>
</div>

css代码我这里就不再写到上面了，你可以将上面的代码复制到本地运行，你会发现点击class为box的div（后面我会以$(".box")做为代号）后，$(".box")的宽度会变成300px，这里我们假设默认宽度为100px，然后再点击class为button的div（后面我会以$(".button")做为代号），这时你就会发现$(".box")的宽度会先变为100px然后再变回300px，而我们实际想要的效果为点击$(".button")后$(".box")的宽度只变回100px而不再执行其它动作，而解决这个问题的唯一方法为在$(".button")的事件执行后面加上return false;就可以了，代码如下

$(".button").click(function(){
	$(this).parent().animate({"width":"100px"});
	return false;    //神奇的代码
});

转载于:https://my.oschina.net/kangweb/blog/1635403