клик не запускается в первый раз для размытия во время показа скрытого элемента внутри формы - PullRequest
Новая
       13

клик не запускается в первый раз для размытия во время показа скрытого элемента внутри формы

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

Ну, может быть, вы ничего не поняли, увидев заголовок (вопрос).Если честно, я не могу определить вопрос по проблеме.Но я уверен, что вы поймете проблему, увидев мой пример.

Внутри form есть скрытый div и input.Во время focusout от ввода будут выполнены некоторые действия.Другой набор действий будет выполнен нажатием кнопки submit.

Вот мой HTML: 

$(document).ready(function () { 
    	$('#name').blur(function() { 
        console.log('blured');
        $('.message').show();
      });
      
      $('body').on('click', '.submitBtn', function () {
        console.log('click on Button');
      });
    })
.message {
      display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  <h1>Heading</h1>
  <div class="message">
    <p>
      Test Message
    </p>
  </div>
  <input type="text" name="name" id="name" />
  <button type="submit" class="submitBtn">Submit</button>
</form>

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

enter image description here

Вы можете видеть, что сообщение click on Button не было напечатано на консоли.Если я снова нажму на кнопку submit, то сообщение будет напечатано.

Если я отключу этот код: //$('.message').show();, тогда все будет работать как положено.Я не понимаю, почему возникла проблема?

Fiddle Demo

Ответы [ 3 ]

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

Это потому, что событие click требует, чтобы mouseup сработало сразу после mousedown.Но здесь, когда вы нажимаете button.submitBtn, последовательность событий становится mousedown blur mouseup.Таким образом, событие click никогда не запускается в первый раз.Таким образом, вы можете попробовать использовать mousedown вместо click и отложить обработчик mousedown на небольшой промежуток времени. 

$('body').on('click', '.submitBtn', function () {
setTimeout(function() {
    console.log('click on Button');
},100);
});
0 голосов
/ 28 декабря 2018

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

Когда вы сфокусированы на вводе и нажимаете кнопку,события фактически вызываются в следующей последовательности: input loses focus / blur, document receives "click"

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

Это означает, что любые изменения, внесенные в документ во время слушателей «размытия», например, удаление целевого элемента из документа, произойдут за до того, как целевой элемент получит свой щелчокВызваны слушатели событий - или даже прежде, чем браузер вообще зарегистрирует его как «целевой» элемент.

В случае этого вопроса блок контента над кнопкой и скрытый с display:none обнаруживается с display:block, когда поле ввода теряет фокус, что перемещает контент, включая кнопку вниз на странице, восвободить место для его появления и, таким образом, заставить «щелчок» фактически пропустить кнопку.

Следующий Fiddle показывает рабочее решение этой проблемы, используя свойство видимости вместо display для того, чтобы зарезервировать пространство, занимаемое скрытым сообщением, вместо того, чтобы заставлять содержимое перемещаться после его обнаружения, правильное использование которого также является лучшей практикой с точки зрения UX: https://jsfiddle.net/sdhtmk90/

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

используйте фокус вместо размытия 

$('#name').focus(function() { 
    console.log('blured');
    $('.message').show();
  });

Почему вы должны это использовать?Потому что событие размытия отправляется элементу, когда он теряет фокус.

, поэтому 1-й щелчок по вводу = фокус

при щелчке в любом другом месте после нажатия на ввод = размытие

Есливам нужно действие, когда пользователь оставляет курсор из поля ввода вместо того, чтобы щелкать за пределами поля ввода, сделайте это так: 

$('#name').focus(function() {
  $(this).mouseout(function() {
    console.log('blured');
    $('.message').show();})
  });
...