点击被忽略：标签元素与表单控件相关联的问题答案

【问题标题】：Click ignored: Issue with label elements to associate with form controls点击被忽略：标签元素与表单控件相关联的问题
【发布时间】：2022-03-23 03:18:26
【问题描述】：

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

例如，在下面的演示中，表单字段 1 有一个必需的验证 onblur，

通过单击标签选择表单域 1
现在单击表单字段 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>

【问题讨论】：

第二个对我来说很好。
旁注； $('*') 通常应避免使用
@Taplar 是的，只是为了弄清楚重点关注的总体情况..
我看到了同样的行为，而且它只发生在第一次，在显示 errorMessage 之前。很有趣。
问题是焦点设置在鼠标上。当您模糊时，您正在添加内容，并且当您单击时，该内容恰好位于光标下方。这导致“鼠标向上”出现在错误文本上，而不是您开始点击的标签上。

标签： javascript jquery html css

【解决方案1】：

这为我解决了这个问题：

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

不知道为什么，但它有效。仅供参考 - 我尝试了 50 次超时，但没有奏效。

【讨论】：

感谢@Ray，这是我今天使用的，但setTimeout 在某些情况下并不理想。

【解决方案2】：

我认为这是因为错误消息立即出现并推送下一个字段，所以这个不再出现在点击发生的地方。给文本一些延迟将防止这种情况发生：

$(function () {
	$('#formfield1').blur(function() {
   	$('#errorMessage').text('Form field is required').delay(1000).show(0);
  });
  
  $('*').on('focus blur', function (e) {
  	console.log(e.type + ' ' + this.id);
  })
});

.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" class="hidden">

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

</div>

或者改变文字的位置：

$(function() {
  $('#formfield1').blur(function() {
    $('#errorMessage').text('Form field is required').css('display','inline-block');
  });

  $('*').on('focus blur', function(e) {
    console.log(e.type + ' ' + this.id);
  })
});

.hidden {
  display: none;
}

div {
  margin: 10px;
}

label {
  width: 100px;
  display: inline-block;
}

.as-console-wrapper {
  max-height: 65px !important;
}

#errorMessage {
  position:absolute;
  margin:0 10px
}

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

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

</div>

【讨论】：

谢谢，我想知道为什么会这样？我通过使用setTimeout 来避免这个问题，但在某些情况下它对我来说并不理想.. 但仍然会忽略点击并且无法弄清楚发生了什么。我将 tabindex 添加到 #errorMessage，这表明焦点也没有设置在那里。
@SelvakumarArumugam 问题是，当您单击下一个表单时，它不再出现在该位置，因为错误消息被放置在那里。所以点击事件没有被该字段捕获（这是我的理解）......是的，错误消息也没有捕获点击。但是如果我们改变位置，我们可以清楚地看到焦点很好，这证实了错误消息的位置是罪魁祸首
我添加了一个点击处理程序来查看是否有任何记录或是否被忽略。是的，同意错误消息的位置是罪魁祸首，但奇怪的是点击没有在任何地方注册。我正在尝试找出哪个元素获得了点击。
@SelvakumarArumugam 如果你真的想得到准确的解释，你需要等待大师 ;) 对我来说，点击被 0 元素捕获，因为当你点击错误消息时还没有出现dom（之前发生过点击），然后可能存在一些竞争条件，在应用点击之前更新了 Dom，因此它也不适用于字段（仅来自我的猜测..）

【解决方案3】：

这与调用.show() 函数时被修改的DOM 中的输入元素位置有关。 errorMessage 将输入向下推并更改其焦点似乎依赖的边界。如果你将errorMessage 放在底部，这样调用.show() 就不会影响formField2 输入的位置，那么焦点就可以正常工作了。

https://jsfiddle.net/ykhupeo8/1/

【讨论】：