如何识别 HTML 中导致模糊事件的元素？

确定触发模糊事件的目标元素

当您处理 HTML 输入元素中的模糊事件时，您可能想知道如何识别导致焦点转移的元素。本文探讨了获取触发元素 ID 的方法。

在提供的代码片段中，模糊事件附加到输入字段。然而，挑战在于确定发起模糊事件的元素，例如可点击的 span 元素。

使用 relatedTarget 属性的解决方案

根据事件目标规范，事件对象的 relatedTarget 属性提供有关模糊事件发生后获得焦点的元素的信息。对于模糊事件：

relatedTarget: event target receiving focus

示例：

function blurListener(event) {
  event.target.className = 'blurred';
  if (event.relatedTarget)
    event.relatedTarget.className = 'focused';
}

// Add blur listeners to all input elements
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

通过将此模糊侦听器附加到输入元素，您可以在获得焦点时识别触发元素（ className = 'focused') 并将模糊输入元素的 className 更改为 'blurred'。

以上是如何识别 HTML 中导致模糊事件的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！