這篇文章主要介紹了jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    HTML結(jié)構(gòu)：很簡單，就一個input,一個div，能說明問題就OK了；
    <input type="text" value="默認(rèn)值"><br/><br/><div>搜索</div>
    想要實現(xiàn)的結(jié)果：
    1、input框獲取焦點時value為“”，失去焦點時value為“默認(rèn)值”；-----這個很好實現(xiàn)；　　　　　　　　
    2、當(dāng)在input框中輸入要搜素的內(nèi)容后，點擊div搜索，要求控制臺打印輸出要搜素的內(nèi)容（當(dāng)然每個項目的需求不同，這里只是舉個例子），而且要求點擊后不影響input的focus和blur行為；----這個才是重點
    先看看沖突沒有解決之前的效果;
    $("input").focus(function () {
    this.value = ""; }).blur(function () {
    this.value = "默認(rèn)值"; });$("div").click(function () {
    var value = $("input").val();
    console.log(value); });
    結(jié)果：在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“默認(rèn)值”，與預(yù)想的結(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 = "默認(rèn)值";
    },300)}); $("div").click(function () {//這部分不變
    var value = $("input").val();
    console.log(value); });
    結(jié)果：在input中輸入“aaaa”,然后點擊div,控制臺輸出的卻是“aaaa”，符合預(yù)想的結(jié)果;
    解決方法二：將div的click事件改成mousedown事件，因為mousedown行為是鼠標(biāo)點下去的時候就被觸發(fā)，而click行為是鼠標(biāo)點下去再抬起的時候才被觸發(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”,然后點擊div,控制臺輸出的卻是“aaaa”，符合預(yù)想的結(jié)果;
    以上所述是小編給大家介紹的jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題，希望對大家有所幫助