2009-11-08 55 views
1

我綁定3個事件:綁定事件,停止多個動作

$("#form").bind('keyup change submit',function(event){ 
    //do something 
    alert("test alert"); 
}); 

在一個形式,你可以有文本字段,下拉菜單,複選框,等....

從我注意到了,直到您單擊文本框的「外部」之後,纔會使用文本字段觸發「更改」事件。 因此,我使用「keyup」事件,這對我很有用。
而「提交」事件是不言自明的。 (我基本上是通過綁定這些事件來讓自己避免執行多個選擇器。) 我可能希望稍後添加更多事件。

這裏是我的問題....

彈出警報會觸發2次,當我進行了更改一個文本框。不知道這是因爲我點擊了導致它的彈出窗口上的按鈕,或者如果更改文本框中的值也可以同時觸發兩個鍵盤彈出的更改事件。

無論哪種方式,這是讓我瘋了。

有關改進此方法的任何想法,沒有多個選擇器?

回答

0

爲什麼不在回調函數之外的某處設置一個布爾標誌(仍然在共享範圍內)。第一次調用將設置標誌並執行,其他人將看到該標誌並返回。您可以在用戶關閉警告框時重置該標誌。

編輯:另一個選項,如果你仍然希望不同的元素能夠發出這些警報有處理程序將其本身作爲一個事件偵聽器。然後,當警報框關閉時,您可以重新註冊它。

0

第二個警報由第一個警報觸發。當第一個警報彈出時,文本字段失去焦點並觸發更改事件。如果真正的處理程序不會導致文本字段失去應該不成問題的焦點。但是,您可能想要忽略文本字段中的更改事件,因爲您已經在使用關鍵字來處理這些字段。
使用從瑞安林奇旗的想法,你可以做到以下幾點:

var target = null; 
$("#form").bind('keyup change submit',function(event){ 
    if (event.type == 'keyup') { 
     target = event.target; 
    // a change event after one or more keyup events in the same element 
    } else if (event.type == 'change' && target === event.target) { 
     //do nothing 
     return false; 
    } 
    // actual handler code 
    alert(event.type) // test code 
}); 

測試在Firefox瀏覽器。我希望這有幫助。

+0

當然'target === event.target'總是爲false,因爲'target'是未定義的? – Eric 2009-11-08 13:13:02

+0

在觸發按鍵事件之前,'target'爲'null'。當用戶輸入時,會觸發多個按鍵事件,從而將「target」設置爲當前元素。當該元素上的變化事件觸發時(失去焦點後)'target === event.target'爲true。 – 2009-11-08 17:56:21

1

編輯:我剛剛看到你的筆記「沒有多個選擇器」。如果需要的話,可以將以下鏈接鏈接起來,如果這樣可以以某種方式符合該法案。

爲了最有效的記憶,我會把它分解成幾個語句。

//Your function 
var handler = function(e) { alert('blah'); }; 

$('#form input[type=text], #form textarea').keyup(handler); 
$('#form select, #form checkbox, #form radio').change(handler); 
$('#form').submit(handler); 

這很好,因爲元素只觸發一個事件,而且它可以幫助您。

請注意,如果您期望支持IE 6,那麼在複選框/收音機/選擇模糊之前不會觸發更改事件,因此您可能想要以不同的方式處理它們(點擊仍適用於複選框/無線電)。

+0

OP應該*真正*分裂它,而不是通過if-soup令一個單一的整體doitall變得複雜。 – 2009-11-16 23:45:05