JQuery中阻止事件冒泡方式及其区别
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="jquery-1.3.2.min.js"></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>
相关文章
- 利用jQuery与.ashx完成简单的Ajax
- jquery事件使用方法总结
- Should I use .done() and .fail() for new jQuery AJAX code instead of success and error
- jQuery源码-dom操作之jQuery.fn.html
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- jquery $.proxy使用 Jquery实现ready()的源码
- jquery中 $ 和 jQuery 及 $() 的区别
- jquery动态绑定事件
- 页面有多个相同的id或者class时,绑定jquery事件无效,解决方案
- jQuery 实现数据校验提交界面
- 猴子也能学会的jQuery第六期——jQuery事件(下)
- 【转载】 JQuery.Gantt(甘特图) 开发指南
- jQuery Mobile方向感应事件
- 《jQuery Cookbook中文版》——1.8 将前一个选择集包含到当前选择集
- 《jQuery Cookbook中文版》——1.17 在不造成全局冲突的情况下使用$别名
- 《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素
- jQuery验证控件jquery.validate.js的使用介绍
- jquery easyui combobox 级联及触发事件,combobox级联
- jquery插件select2事件不起作用(select2-3.5.4)
- JQuery中动态生成元素的绑定事件(坑死宝宝了)
- [转]jquery设置select选中,赋值等操作
- jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
- 浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
- Jquery学习—jquery的事件
- 强大实用的jQuery幻灯片插件Owl Carousel
- jquery文本框内容改变事件
- jquery.js和jquery.min.js的区别和springboot整合echarts.min.js