2012-02-11 145 views
0

我試圖創建一個啓用了Ajax的webform,並創建了一個簡單的頁面。在頁面上,我有一個包含我希望編輯的值的div。Javascript事件觸發器

我有工作的JavaScript添加周圍的div的內容文本輸入框,完成與保存按鈕回發到網絡服務器,但不像example我跟着,我不想取消按鈕,而不是我想取消操作被輸入框丟失焦點觸發。

我已經在文本輸入框中添加了一個onblur事件來取消編輯操作並將表單恢復爲原始未編輯狀態(並且不保存更改)。

我遇到的問題是,當我點擊'保存'按鈕時,文本輸入框的onblur事件也被觸發。我怎樣才能阻止這種情況發生?

編輯功能(當用戶點擊要被編輯的文本稱爲)如下:

function edit(obj) 
{ 
    Element.hide(obj); 
    var textarea = '<div id="'+obj.id+'_editor"><div class="fieldvalueedit"><input type="text" id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" size="64" value="'+obj.innerHTML+'"></div>'; 
    var button = '<div class="fieldvaluebuttons"><input id="'+obj.id+'_save" type="button" value="Save"/></div></div>'; 

    new Insertion.After(obj, textarea+button); 
    document.getElementById(obj.id+'_edit').focus(); 
    Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false); 
    Event.observe(obj.id+'_edit', 'blur', function(){cleanUp(obj)}, false); 
} 
+0

那麼你不能阻止它,因爲當你點擊其他東西時,元素將不可避免地失去焦點。可能會發揮作用的是在實際模糊後的幾毫秒內將「模糊」活動包含在超時中。然後,您可以使用提交按鈕上的處理程序來設置模糊處理程序將檢查的標誌。 – Pointy 2012-02-11 15:36:12

+1

看起來像[Prototype.js](http://www.prototypejs.org)JavaScript框架。我相信[prototypejs]標籤比'web-development'更有用。 – 2012-02-11 15:37:46

+0

@RobW這確實是prototype.js,我已經更新了標籤以反映這一點,謝謝。 – Bryan 2012-02-11 15:42:42

回答

1

代替使用輸入你可以對復位文檔註冊onClick事件的onblur事件textareas狀態,然後在單擊保存按鈕時取消該事件的傳播(您也可以將其應用於文本區域)。

Event.observe(obj.id+'_save', 'click', function(e){ 
    e.stopPropagation(); 
    saveChanges(obj); 
}, false); 
Event.observe(document, 'click', function(){cleanUp(obj)}, false);