jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
HTML結(jié)構(gòu):很簡單,就一個input,一個div,能說明問題就OK了;
<input type="text" value="默認值"><br/><br/><div>搜索</div>
想要實現(xiàn)的結(jié)果:
1、input框獲取焦點時value為“”,失去焦點時value為“默認值”;-----這個很好實現(xiàn);
2、當在input框中輸入要搜素的內(nèi)容后,點擊div搜索,要求控制臺打印輸出要搜素的內(nèi)容(當然每個項目的需求不同,這里只是舉個例子),而且要求點擊后不影響input的focus和blur行為;----這個才是重點
先看看沖突沒有解決之前的效果;
$("input").focus(function () { this.value = ""; }).blur(function () { this.value = "默認值"; });$("div").click(function () { var value = $("input").val(); console.log(value); });
結(jié)果:在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“默認值”,與預想的結(jié)果不符;
解決方法一:在blur的回調(diào)函數(shù)中加一個定時器,延遲blur回調(diào)函數(shù)的執(zhí)行時間,這樣的話雖然在點擊div的時候,input的blur行為先被觸發(fā),但是由于加了定時器延遲,所以得等到div的click回調(diào)執(zhí)行完成后才能執(zhí)行input的blur行為的回調(diào);
$("input").focus(function () { this.value = "";}).blur(function () { var self=this; setTimeout(function(){ self.value = "默認值"; },300)}); $("div").click(function () {//這部分不變 var value = $("input").val(); console.log(value); });
結(jié)果:在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“aaaa”,符合預想的結(jié)果;
解決方法二:將div的click事件改成mousedown事件,因為mousedown行為是鼠標點下去的時候就被觸發(fā),而click行為是鼠標點下去再抬起的時候才被觸發(fā)
$("input").focus(function () {//這部分不變 this.value = "";}).blur(function () { this.value = "默認值";}); $("div").mousedown(function () { var value = $("input").val(); console.log(value); });
結(jié)果:在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“aaaa”,符合預想的結(jié)果;
以上所述是小編給大家介紹的jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實現(xiàn)圖片放大預覽實現(xiàn)原理及代碼
jQuery實現(xiàn)圖片放大原理很簡單,就是將圖片顯示的尺寸變大后放在瀏覽器的一個指定位置,從而實現(xiàn)圖片的放大預覽,下面有個不錯的示例,感興趣的朋友可以參考下2013-09-09Spring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例
下面小編就為大家?guī)硪黄猄pring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jquery實現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
這篇文章主要介紹了jquery實現(xiàn)自定義樹形表格的方法,結(jié)合實例形式分析了jQuery創(chuàng)建自定義樹形結(jié)構(gòu)table的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07jquery讀取xml文件實現(xiàn)省市縣三級聯(lián)動的方法
這篇文章主要介紹了jquery讀取xml文件實現(xiàn)省市縣三級聯(lián)動的方法,涉及jQuery操作XML文件及Ajax動態(tài)加載的技巧,需要的朋友可以參考下2015-05-05