Javascript event triggers

Question

I'm trying to create an Ajax enabled webform, and have created a simple page. On the page, I have a div that contains the value I wish to edit.

I've got working javascript to add a text input box around the contents of the div, complete with a Save button to post back to the web server, but unlike the example I'm following, I don't want a cancel button, instead I want the cancel operation to be triggered by the input box losing focus.

I've added a onblur event to the text input box to cancel the edit operation and return the form back to it's original unedited state (and not save the change).

The problem I'm having, is that when I click the 'Save' button, the onblur event of the text input box is also triggered. How can I stop this happening?

The edit function (called when a user clicks on the text to be edited) is as follows:

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);
}

Answer 1

Instead of using an onblur event on input you can register an onclick event on the document that resets the textareas state, then cancel the propagation of this event when the save button is clicked (you will want to apply this to the text area as well).

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