Триггеры событий Javascript - PullRequest
Новая
       17

Триггеры событий Javascript

0 голосов
/ 11 февраля 2012

Я пытаюсь создать веб-форму с поддержкой Ajax и создал простую страницу.На странице у меня есть div, который содержит значение, которое я хочу отредактировать.

У меня есть рабочий javascript для добавления текстового поля ввода вокруг содержимого div, в комплекте с кнопкой Save для отправки назад.к веб-серверу, но в отличие от примера , за которым я следую, я не хочу кнопку отмены, вместо этого я хочу, чтобы операция отмены была вызвана потерей фокуса в поле ввода.

Я добавил событие 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);
}

1 Ответ

1 голос
/ 11 февраля 2012

Вместо использования события onblur при вводе вы можете зарегистрировать событие onclick в документе, который сбрасывает состояние textareas, а затем отменить распространение этого события при нажатии кнопки сохранения (вы захотите применить его к текстовой области как хорошо). 

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