jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
HTML結(jié)構(gòu):很簡單,就一個(gè)input,一個(gè)div,能說明問題就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)
先看看沖突沒有解決之前的效果;
$("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事件沖突問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)跟隨鼠標(biāo)運(yùn)動(dòng)圖層效果的方法,可實(shí)現(xiàn)實(shí)時(shí)顯示鼠標(biāo)坐標(biāo)的圖層跟隨鼠標(biāo)運(yùn)動(dòng)的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
jQuery實(shí)現(xiàn)圖片放大原理很簡單,就是將圖片顯示的尺寸變大后放在瀏覽器的一個(gè)指定位置,從而實(shí)現(xiàn)圖片的放大預(yù)覽,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-09-09關(guān)于jquery性能最佳實(shí)踐的討論,與求教
很久沒寫東西,年前的項(xiàng)目也接近尾聲,最近在網(wǎng)上看到一篇文章是 阮一峰 的 《jQuery最佳實(shí)踐》 鏈接在文末2012-03-03jQuery實(shí)時(shí)顯示鼠標(biāo)指針位置和鍵盤ASCII碼
本文通過jquery技術(shù)實(shí)現(xiàn)鼠標(biāo)指針位置和鍵盤ASCII碼,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-03-03Spring MVC中Ajax實(shí)現(xiàn)二級聯(lián)動(dòng)的簡單實(shí)例
下面小編就為大家?guī)硪黄猄pring MVC中Ajax實(shí)現(xiàn)二級聯(lián)動(dòng)的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07jquery實(shí)現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
這篇文章主要介紹了jquery實(shí)現(xiàn)自定義樹形表格的方法,結(jié)合實(shí)例形式分析了jQuery創(chuàng)建自定義樹形結(jié)構(gòu)table的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07jquery讀取xml文件實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery讀取xml文件實(shí)現(xiàn)省市縣三級聯(lián)動(dòng)的方法,涉及jQuery操作XML文件及Ajax動(dòng)態(tài)加載的技巧,需要的朋友可以參考下2015-05-05