javascript - 点击被忽略 : Issue with label elements to associate with form controls

Question

我已使用“for”属性将标签元素关联到表单字段。当我在表单字段下方显示验证消息时，会出现此问题。

例如，在下面的演示中，表单字段 1 需要验证 onblur，

1. 通过点击标签选择表单字段 1
2. 现在单击表单字段 2 标签，该标签应将焦点设置到表单字段 2，但焦点未设置并且单击被忽略.

有什么想法吗？

$(function () {
	$('#formfield1').blur(function() {
   	$('#errorMessage').text('Form field is required').show();
  });
  var counter = 1;
  $('*').on('focus blur', function (e) {
  	console.log(counter++ + ' ' + e.type + ' ' + this.id);
  })
  
  $('*').click(function (e) {
     e.stopImmediatePropagation()
     console.log(counter++ + ' ' + e.target.id + ' clicked ');
  });
});

.hidden { display: none; }
div { margin: 10px; }
label { width: 100px; display: inline-block; }
.as-console-wrapper { max-height: 65px !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 300px; overflow: hidden;">
  <div>
    <label for="formfield1">Form Field 1</label> <input type="text" id="formfield1" />
  </div>
  <div id="errorMessage" tabindex="1" class="hidden">

  </div>
  <div>
    <label for="formfield2">Form Field 2</label> <input type="text" id="formfield2" />
  </div>

</div>

Answer 1

这为我解决了这个问题:

$('#formfield1').blur(function() {
    window.setTimeout(function () { $('#errorMessage').text('Form field is required').show(); }, 100);
});

不知道为什么，但它有效。仅供引用 - 我尝试将超时设置为 50，但没有成功。