快捷導(dǎo)航

jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問(wèn)題

更新時(shí)間：2016年08月15日 14:32:38 作者：自信的菜鳥(niǎo)

這篇文章主要介紹了jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問(wèn)題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

HTML結(jié)構(gòu)：很簡(jiǎn)單，就一個(gè)input,一個(gè)div，能說(shuō)明問(wèn)題就OK了；

<input type="text" value="默認(rèn)值"><br/><br/><div>搜索</div>

想要實(shí)現(xiàn)的結(jié)果：

1、input框獲取焦點(diǎn)時(shí)value為“”，失去焦點(diǎn)時(shí)value為“默認(rèn)值”；-----這個(gè)很好實(shí)現(xiàn)；　　　　　　　　

2、當(dāng)在input框中輸入要搜素的內(nèi)容后，點(diǎn)擊div搜索，要求控制臺(tái)打印輸出要搜素的內(nèi)容（當(dāng)然每個(gè)項(xiàng)目的需求不同，這里只是舉個(gè)例子），而且要求點(diǎn)擊后不影響input的focus和blur行為；----這個(gè)才是重點(diǎn)

先看看沖突沒(méi)有解決之前的效果;

$("input").focus(function () { 
this.value = ""; }).blur(function () { 
this.value = "默認(rèn)值"; });$("div").click(function () { 
var value = $("input").val(); 
console.log(value); });

結(jié)果：在input中輸入“aaaa”,然后點(diǎn)擊div,控制臺(tái)輸出的卻是“默認(rèn)值”，與預(yù)想的結(jié)果不符;

解決方法一：在blur的回調(diào)函數(shù)中加一個(gè)定時(shí)器，延遲blur回調(diào)函數(shù)的執(zhí)行時(shí)間，這樣的話雖然在點(diǎn)擊div的時(shí)候，input的blur行為先被觸發(fā)，但是由于加了定時(shí)器延遲，所以得等到div的click回調(diào)執(zhí)行完成后才能執(zhí)行input的blur行為的回調(diào)；

$("input").focus(function () { 
this.value = "";}).blur(function () { 
var self=this; 
setTimeout(function(){ 
self.value = "默認(rèn)值"; 
},300)}); $("div").click(function () {//這部分不變 
var value = $("input").val(); 
console.log(value); });

結(jié)果：在input中輸入“aaaa”,然后點(diǎn)擊div,控制臺(tái)輸出的卻是“aaaa”，符合預(yù)想的結(jié)果;

解決方法二：將div的click事件改成mousedown事件，因?yàn)閙ousedown行為是鼠標(biāo)點(diǎn)下去的時(shí)候就被觸發(fā)，而click行為是鼠標(biāo)點(diǎn)下去再抬起的時(shí)候才被觸發(fā)

$("input").focus(function () {//這部分不變 
this.value = "";}).blur(function () { 
this.value = "默認(rèn)值";}); $("div").mousedown(function () { 
var value = $("input").val(); 
console.log(value); });

結(jié)果：在input中輸入“aaaa”,然后點(diǎn)擊div,控制臺(tái)輸出的卻是“aaaa”，符合預(yù)想的結(jié)果;

以上所述是小編給大家介紹的jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問(wèn)題，希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: