jquery点击事件捕获
Posted Bai~Jr
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery点击事件捕获相关的知识，希望对你有一定的参考价值。
最近做个小功能仿ECSHOP，动态改变某个dom内容，然后ajax提交保存。不用像平常那样修改个表还需要进入到修改页面然后点击保存。
整体思路不难，假如原来是span或h3，a等标签，点击之后获取内容，然后新增一个input标签，并把value值赋给input。修改完内容之后，input标签blur事件出发之后做正则判断，然后ajax提交后台。成功则把新value值赋给原先的标签，去掉input标签。
1.获取原来内容val
2.新增input标签，并赋值val
3.改变input值，blur之后执行相应ajax函数
但是做的时候遇到个小问题一直困扰了小半天。
当父元素点击之后，新增input标签，此时如果在input标签中再点击，之前内容就会消失。最开始以为input中双击触发了两次blur事件导致。但是单独新建个input发现input中双击文本并不会触发blur事件。那问题又出在哪里？
最后发现原来是，最开始给父元素span标签绑定了click事件，input是span子元素，在input当中无论单击或双击都会出发父元素的click事件。发现问题之后加上判断，如果span点击，子元素中没有input则取值并赋值input，如果有则不执行click
$(".robotinfoavatar").click(function(){
if($(this).find("input").length == 0){
var sp = $(this).children("span");
var txt = trim(sp.text());
sp.html("<input type=\'text\' />");
sp.children("input").focus().val(txt);
}
});
问题解决~ 后续再研究下
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;"><br><br>2.然后再单击这里</div>
</div>
</div>
</body>
</html>
以上是关于jquery点击事件捕获的主要内容，如果未能解决你的问题，请参考以下文章
捕获“在新选项卡中打开链接”的事件点击 javascript 或 jquery - 隐藏 URL