JQuery如何阻止事件冒泡
小伙美女乐园
7
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡。<style>#content{width: 140px;border: 1px solid blue; }#msg{width: 100px;height: 100px;margin: 20px;border: 1px solid red; }</style><body> <divid="content"> 外层div <divid="msg">内层div</div> </div></body>显示结果
对应的jQuery代码如下：
<scripttype="text/JavaScript"src="js/jquery-1.8.3.js"></script><scripttype="text/JavaScript"> $(function(){// 为内层div绑定click事件 $("#msg").click(function(){ alert("我是小div"); });// 为外层div元素绑定click事件 $("#content").click(function(){ alert("我是大div"); });// 为body元素绑定click事件 $("body").click(function(){ alert("我是body"); }); });</script>当点击小div时，会触发大div与body 的点击事件。点击大div时会触发body的点击事件。
如何防止这种冒泡事件发生呢？
修改如下：
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><scripttype="text/javascript"> $(function(){// 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div"); event.stopPropagation(); // 阻止事件冒泡 });// 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div"); event.stopPropagation(); // 阻止事件冒泡 });// 为body元素绑定click事件 $("body").click(function(event){ alert("我是body"); event.stopPropagation(); // 阻止事件冒泡 }); });event.stopPropagation(); // 阻止事件冒泡
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。
html部分
<body><formaction="test.html"> 用户名：<inputtype="text"id="username" /><br/><inputtype="submit"value="提交"id="sub"/></form>
</body>
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><scripttype="text/javascript"> $(function(){ $("#sub").click(function(event){//获取元素的值，val() 方法返回或设置被选元素的值。var username = $("#username").val(); //判断值是否为空if(username==""){ //提示信息//alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) event.preventDefault(); } }); });</script>//阻止默认行为 ( 表单提交 )event.preventDefault();还有一种防止默认行为的方法就是return false。效果一样。
代码如下：
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><scripttype="text/javascript"> $(function(){ $("#sub").click(function(event){//获取元素的值，val() 方法返回或设置被选元素的值。var username = $("#username").val(); //判断值是否为空if(username==""){ //提示信息//alert("文本框的值不能为空"); $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 )//event.preventDefault(); returnfalse; } }); });</script> 同理，上面的冒泡事件也可以通过return false来处理
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script><scripttype="text/javascript"> $(function(){// 为内层div绑定click事件 $("#msg").click(function(event){ alert("我是小div");//event.stopPropagation(); // 阻止事件冒泡returnfalse; });// 为外层div元素绑定click事件 $("#content").click(function(event){ alert("我是大div");//event.stopPropagation(); // 阻止事件冒泡returnfalse; });// 为body元素绑定click事件 $("body").click(function(event){ alert("我是body");//event.stopPropagation(); // 阻止事件冒泡returnfalse; }); });本文完?
相关文章
-
作者|寒月 责编|胡巍巍 本文经授权转载 最早期的开发，大多都使用jQuery，它给我们带来了很多的便利：快速选取元素，方便操作DOM元素的API，各个浏览器之间完美的兼容性，链式操作，动画、ajax等等都是jQuery为前端开发人员来带的好处。为什么现在越来越少人用了呢？我来分以下几点，阐述我的想法： JS更新带来
lzdlzdkk
4 1
0 条评论
-
源自|HackerNews 译者|无明 编辑|王莹 很多人提倡"只使用纯JavaScript，根本不需要jQuery"。好吧，很多东西确实是我不需要的，尽管它们可能都很好。我可能也不需要jQuery，但它确实也很好。 有些文章（详见下方链接）试图告诉我们：去掉jQuery其实是很容易的。但这篇文章在开头却举了一个使用
你是我的依靠8
5 0
0 条评论
-
1.Gradientify Gradientify是一个简单的jQuery插件，它提供了CSS梯度过渡效果。 2.PrognRoll PrognRoll是一个微小的jQuery插件，用于在页面上创建滚动进度条。您还可以自定义进度条。 3.jqGifPreview jqGifPreview是一个jQuery插件用来
vonai55
6 6
0 条评论
-
授权协议：Apache 开发语言：JavaScript 操作系统：跨平台 软件作者：love封尘 fcode.js是什么？fcode.js是一款web页面九宫格自动锁屏js插件，依赖于jquery，会在设置的范围里，判断用户有无操作，然后执行锁屏的功能。 就一个js文件，配置简单，操作方便，可以锁住任何页面，还支持在
酸辣鱼肠
5 0
0 条评论
-
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。通
小伙美女乐园
7 0
0 条评论
