使用事件動作排除事件監聽

對於我想要觸發的輸入有一個更改事件，除非您單擊列表項目。基本上，我調用一個函數來檢查這個字段的變化，但是也有一個自動完成腳本，它在你選擇的輸入下面添加一個無序列表，當你點擊一個項目來填充輸入字段時觸發這個變化（在添加新值之前基本上會觸發）。下面是javascript代碼：使用事件動作排除事件監聽

document.observe('dom:loaded',function() { 
    new Ajax.Autocompleter("search_input", "found_input", "someurl.jsp", { 
     afterUpdateElement: updateSelectedItem, 
     minChars: 2 
    }); 
    if ($('search_input') != undefined) { 
     $('search_input').observe('change', function(e, el) { 
      if (e.explicitOriginalTarget.up(1) != undefined && e.explicitOriginalTarget.up(1).id != "found_input") { 
       checkFunction(this.value); 
      } 
     }); 
    } 
});

我加入了explicitOriginalTarget在那裏，因爲它工作在Mozilla瀏覽器，但是這不是一個跨瀏覽器的解決方案。我也嘗試添加一個變量，當你點擊一個無序列表項時，這個變量會被添加，但是在search_input字段後面會觸發它，因爲它在DOM之後。

感謝您的協助。

編輯：

這裏你可以看到一個小例子：http://jsfiddle.net/DfMYE/5/ 如果你開始輸入「測試」，你會看到一個下降的2個選擇了。當你點擊一個，它會觸發更改事件和選擇事件。如果我們點擊選擇列表，我想停止更改事件。

來源

2012-07-09 fanfavorite

有沒有機會看到這在行動或小提琴？ – dontGoPlastic 2012-07-10 05:06:04

剛剛發佈了鏈接。謝謝。 – fanfavorite 2012-07-10 15:39:54

這裏是我的無可否認的hackish的解決方案：http://jsfiddle.net/kkFsJ/1/

發生了什麼事是通過點擊自動完成選項，你模糊輸入字段，因此提交您所鍵入的任何值和變化的事件被分派在球場上。這是你可以在自動完成選項點擊（它需要mouseup）來觸發該功能，以用您選擇的內容替換輸入內容。這是你問題的根源。

我不完全理解的是，爲什麼在您進行自動完成選擇後，另一個更改事件不會被調用（至少在Safari中）。我想知道，如果以編程方式更改輸入的值不會觸發更改事件。我應該知道如果是這樣的話，但我需要測試它。有任何想法嗎？

所以 - 我所做的是子類Autocompleter.Local類和分配onClick回調每個L1的鼠標按下事件。這似乎在窗體的模糊事件之前觸發onClick（因此觸發更改）。然後我手動在輸入字段上觸發更改事件。

我仍然必須設置一個changing標誌，以便searchHandler回調沒有多次調用一次自動完成選擇。這發生在Firefox中。我推遲這個回調的實際工作，讓這些事件平息下來，然後關掉changing標誌。這是最糟糕的部分，對不起。

需要注意的一件事是，如果您選擇自動填充選項，則無論選擇的值是否與最初在輸入字段中的值不同，都會觸發更改事件。避免這種情況需要更多的修補Autocompleter代碼，我會讓你照顧，如果你想。另外，我只在Mac和Mac上的FF和Safari上進行了測試，所以如果要進行生產測試和適當調整。

希望這可以解決或至少給你一些想法。如果您或其他人對此問題有不同的看法（除了重寫自動完成功能），我很樂意聽到。

來源

2012-07-11 04:26:00 dontGoPlastic

我在代碼中改變了所有我添加的全局變量更改，爲found_input div添加了mousedown observer，它將var更改爲true，並將updateSelectedItem中的var更改爲false。這似乎是訣竅。謝謝。 – fanfavorite 2012-07-11 18:04:58

@fanfavorite聽起來不錯！ – dontGoPlastic 2012-07-11 18:28:15

使用事件動作排除事件監聽

回答

相關問題