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點擊事件捕獲