最近做個小功能仿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>