Не удается обнаружить нажатие кнопки при использовании фокусировки и фокусировки вместе с событием Click - PullRequest
Новая
       20

Не удается обнаружить нажатие кнопки при использовании фокусировки и фокусировки вместе с событием Click

0 голосов
/ 14 декабря 2018

Я использую событие focusout и focusin в полях ввода в моем приложении.Мой скрипт проверяет, есть ли в полях ввода ошибка проверки или нет, когда происходят события focusin / focuseout;следовательно, под окном ввода отображаются соответствующие сообщения об ошибках, в которых указывается проблема при вводе пользователем.

У меня также есть кнопка отправки, и после слов, когда вся форма заполнена, я снова запускаю проверку для каждого вводакоробка для любых ошибок.

Итак, я приложил 3 события, 1. focusout 2. focusein events 3. <button> submit button (Click) events.

Заметил, что там, когда событие focusout and click запускается одновременно, click event подавляется в этом случае ниже.

Обратите внимание, что все работает нормально, если печатаются только сообщения [для целей отладки],Но в тот момент, когда я выполняю некоторые манипуляции с DOM [изнутри focusout метода], например добавление класса в div или вставку в span под полем ввода и т. Д. - Самое первое событие щелчка мыши остается незамеченным.

Когда это происходит

Когда ошибка ввода исправлена ​​и немедленно, без нажатия в другом месте на странице, нажимается кнопка отправки.

Это только когданажатие кнопки дважды обнаруживает событие щелчка.

Ниже приведен пример фрагмента Jquery с такой же проблемой.

Действия для повторного создания проблемы:

  1. Нажмите на поле ввода.
  2. Нажмите кнопку вкладки (вы увидите сообщение «Ввод пуст» под полем ввода).

  3. Теперь введите в это значениеполе ввода.

  4. Нажмите кнопку отправки напрямую (убедитесь, что вы больше нигде не нажимаете).событие Click кнопки отправки не запускается.Первый щелчок просто игнорируется, затем он срабатывает при последующих щелчках. 

$("#submit").click(function(event){
    if(null != $("#watch").val() && $("#watch").val() != ""){
    $(".error-msg").text("inside submit: good to submit");
  }else{
  $(".error-msg").text("inside submit: submit done");
  
  }
  
});

$("#watch").focusout(function(event){
if(null != $("#watch").val() && $("#watch").val() != ""){
  $(".error-msg").html("inside focusout only");
$('.test1').css('display','none');
 $('.test1').addClass('testing');

}else{
  $(".error-msg").html("input is blank");
  $('.test2').addClass('testing');
}



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test1">test1</div>

<input id="watch" type="text"  placeholder="My input"/>
<div class="error-msg"></div>



<button id="submit" type="text">submit</button>

1 Ответ

0 голосов
/ 14 декабря 2018

Я думаю, это связано с конфликтом последовательности событий.Для возникновения события click, за событием mousedown должно следовать событие mouseup.Но здесь последовательность событий после вашего четвертого шага воспроизведения равна mousedown> foucusout> mouseup.Таким образом, событие click никогда не запускается.В качестве обходного пути вы можете попробовать использовать событие mousedown для button#submit и использовать setTimeout для оценки обработчика mousedown с небольшой задержкой для получения желаемого результата. 

$("#submit").mousedown(function(event) {
  setTimeout(function() {
    if (null != $("#watch").val() && $("#watch").val() != "") {
      $(".error-msg").text("inside submit: good to submit");
    } else {
      $(".error-msg").text("inside submit: submit done");
    }
  }, 50);
});

$("#watch").focusout(function(event){
if(null != $("#watch").val() && $("#watch").val() != ""){
  $(".error-msg").html("inside focusout only");
$('.test1').css('display','none');
 $('.test1').addClass('testing');

}else{
  $(".error-msg").html("input is blank");
  $('.test2').addClass('testing');
}



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test1">test1</div>

<input id="watch" type="text"  placeholder="My input"/>
<div class="error-msg"></div>



<button id="submit" type="text">submit</button>
...