Проблема с размытием jQuery и распространением отправки

#jquery #blur

#jquery #размытие

Вопрос:

У меня есть простая новая форма пользователя с полем ввода «Отображаемое имя», которое запускает вызов ajax при событии blur (). Это делается для проверки, существует ли введенное значение уже в базе данных.

Пример:

  $("#displayname").blur(function() {
    //do something
 })
  

Как только отображается имя, пользователь нажимает кнопку «Отправить», чтобы продолжить, что является следующим немедленным действием в форме.

Пример:

 $("#button").click(function() {
   $("#form").trigger("submit");
})
  

Однако событие blur () ВСЕГДА срабатывает первым, и нажатие кнопки не регистрируется. Только при втором нажатии на кнопку распространение становится правильным. Это вызывает хаос в моей форме.

Есть ли у меня какой-либо способ подавить событие blur () текстового поля ПРИ нажатии кнопки?

Спасибо за любую помощь, приветствую!

Комментарии:

1. Возможно, будет лучше, если вы подавите событие щелчка (возможно, отключив кнопку), пока не будет выполнена функция размытия. Что вы думаете?

2. Поскольку размытие (focusout) срабатывает перед щелчком во всех браузерах, единственное, что вы можете сделать, это поместить обработчик размытия в setTimeout и вернуться раньше, если кнопка была нажата. Но в целом, это плохой дизайн.

Ответ №1:

Если я вас правильно понимаю, сценарий проблемы заключается в том, что blur это вызвано нажатием кнопки.

К счастью, информация о событии передается обработчику, и событие должно содержать target свойство. Исходя из этого, вы можете сделать вывод, следует ли что-то делать с blur . Используйте свой любимый js-отладчик, чтобы остановиться в blur обработчике событий и посмотреть, что находится в target свойстве.

 $("#displayname").blur(function(evt) {
   if (evt.target is not the button){ // figure this out with debugger
      //do something 

       return true; // I handled it
   }
   return false; // I didn't handle it
 })
  

Однако в этом сценарии вы не будете выполнять динамическую проверку того, что все, что находится в поле, отсутствует в базе данных.

У @eZakto есть хорошее предложение отключить кнопку отправки, пока не будет выполнена проверка ajax вашего ввода.

Комментарии:

1. Спасибо всем вам. Извините, что я ответил поздно. Мы также не смогли решить проблему с помощью event.target, поэтому единственным оставшимся методом было запустить проверку в java и получить обратный вызов.

Ответ №2:

Вы ищете ‘event.relatedTarget’. Для событий focusOut или blur это значение устанавливается на элемент, получающий фокус, таким образом, вы знаете, что размытие вызвано нажатием на вашу кнопку отправки, а не каким-либо другим событием.

 $("#displayname").blur(function(event) {
    if (event.relatedTarget amp;amp; (event.relatedTarget.id === 'button')){
        $("#button").trigger('click');
    }
    else {
        // do blur stuff here 
    }
});