您的位置：首页 > 其它

一周电影

2012-03-24 21:38 281 查看

JQuery 提供了两种方式来阻止事件冒泡。方式一：event.stopPropagation(); $("#div1").mousedown(function(event){
event.stopPropagation();
}); 方式二：return false; $("#div1").mousedown(function(event){
return false;
}); 但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 一般使用方式一 场景应用： Google 和百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。 示例测试代码： 当文本输入框获取焦点后，在div1的mousedown事件中采用 event.stopPropagation(); 代码，我们鼠标单击红色区域后文本输入框光标失去。而当我们使用 return false; 代码时，鼠标单击红色区域光标仍然停留在文本输入框内。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" />   <title></title> <script language="JavaScript" type="text/javascript" src=\'#\'" /script> <script>     $(document).ready(function(){         $("#div1").mousedown(function(event){             //event.stopPropagation();             return false;         });         $("#div2").mousedown(function(event){             alert("trigger mousedown event of rootDiv");         });     }); </script> </head> <body>     <div id="rootDiv" style="position:relative;left:400px;top:200px;">         <div>1.单击输入框，使输入框获取焦点：</div>         <input id="input1" style="width:250px;" type="text"></input>         <div id="div2">             <div id="div1" style="width:200px;height:200px;background-color:red;"><br><br>2.然后再单击这里</div>         </div>     </div> </body> </html>

本文出自 “allenzhangfan的博客” 博客，请务必保留此出处http://allenzhangfan.blog.51cto.com/8790473/1392158

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航