JQuery中阻止事件冒泡方式及其区别
来源:互联网 发布:下面对云计算基础设施 编辑:程序博客网 时间:2024/09/21 09:21
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中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- jQuery中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- JQuery中阻止事件冒泡方式及其区别
- jQuery阻止事件冒泡方式
- JQuery 中阻止冒泡事件
- HTML事件冒泡和JQuery阻止事件冒泡的方式
- JQuery 中阻止事件冒泡小案例
- Jquery中阻止默认冒泡事件
- jQuery阻止事件冒泡
- Jquery 阻止事件冒泡
- 阻止jQuery事件冒泡
- 阻止jQuery事件冒泡
- jquery阻止事件冒泡
- Spring MVC 配置
- 黑马程序员 【】java学习之路——TCP(三)客户端上传文件到服务器
- kaldi里的聚类机制
- 各种奇葩的输入输出
- Redis Python Client
- JQuery中阻止事件冒泡方式及其区别
- struts2 拦截器与过滤器的区别
- HTML文本框readonly和disabled属性的区别
- Redis的Python客户端redis-py
- POJ 2481 Cows(树状数组)
- Libgdx的使用(10)——双舞台
- 码农的读书和跑步
- xp记事本 保存文本文件 ANSI、UTF8编码
- Sql语句注入漏洞