jquery阻止事件冒泡
2014-10-27 17:30
113 查看
在使用jquery进行事件处理的时候,当从里到外的多层都响应某一事件,然后又在里层发生该事件时,jquery默认是会从里到外依次响应各个事件的,然而有时候这并不是我们所需要的。这个时候就需要我们来阻止外层事件的发生,阻止冒泡。
jquery中可以用来阻止事件冒泡的主要有两种,stopPropagation()和return false
如:
jquery中可以用来阻止事件冒泡的主要有两种,stopPropagation()和return false
如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> #inner { height: 100px; background: #cfc; } #middler { background: #ccf; } #outer { background: #fcc; } div { border: 1px solid blue; padding: 20px; width: 200px; } </style> <script type="text/javascript" src="/tiantian/js/jquery-1.5.js"></script> <script type="text/javascript"> $(function() { $("div").click(function(event) { alert($(this).attr("id"));//这样在点击inner的时候会从里到外依次响应其点击事件,依此弹出inner,middler,outer //return false;//这样则会阻止其默认行为,阻止事件不再冒泡,这样就只会弹出inner event.stopPropagation();//阻止事件冒泡 }); }); </script> </head> <body> <div id="outer"> 最外层 <div id="middler"> 中间层 <div id="inner">最里层</div> </div> </div> </body> </html>
相关文章推荐
- javascript事件冒泡实例详解和jquery阻止事件冒泡的两种方法
- Jquery阻止事件冒泡
- jquery 阻止冒泡事件实例 stopPropagation
- JS,Jquery中事件冒泡以及阻止事件冒泡方法
- 带你学习JQuery:事件冒泡和阻止默认行为
- jQuery阻止事件冒泡2010-04-09 11:37
- jQuery 中的事件冒泡和阻止默认行为
- jquery阻止事件冒泡的两种方法 .
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- JQuery 中阻止冒泡事件
- Jquery阻止事件冒泡 event.stopPropagation
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- JS:停止事件冒泡和阻止浏览器的默认行为 js/jquery/prototype
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- jquery阻止事件冒泡的两种方法
- Jquery阻止事件冒泡 event.stopPropagation
- jQuery阻止事件冒泡
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- JQuery中阻止事件冒泡方式及其区别
- jQuery阻止 toggle方法事件冒泡