Javascript 仅在手机聚焦后立即触发输入字段模糊事件

在我正在工作的网站上，我有一个自定义搜索字段，用户需要根据设备在不同的位置进行搜索。这是一个WordPress网站，搜索从标题菜单开始。在手机上，它被移动到标题区/汉堡包菜单上方。它们还有一个规范，即字段本身应该隐藏，直到单击按钮，此时字段才会显示

在桌面上，在搜索表单在DOM中移动之前，一切正常。但在移动设备上，在显示输入字段本身后，模糊事件在焦点事件后约200毫秒触发

在阅读了下面的答案之后，我猜测是在DOM中移动搜索元素导致了这个问题，但是如果不创建两个相同的搜索字段并根据屏幕宽度隐藏一个字段，我就无法解决这个问题。我链接的问题/答案不太符合我的场景，因此它并没有真正帮助我找到解决方案

这是我的实际表格：

---

你试过移动它，而不是再次分离和附加它吗？@Taplar，是的，我试过了，也遇到了同样的问题。请给我们看一下为
blur
和
focus
@Guilhermelmi附加事件的代码也许我说的不对，但我指的是当你点击网页上的一个输入字段时发生的默认模糊和聚焦事件。我没有写任何专门设置这些事件的东西。除非你是指当我记录你点击输入时触发的事件时控制台中出现的事件消息。明白了！但是您可以通过代码为
blur
和
focus
添加一些监听器，比如
input.addEventListener（'focus'，function（）{console.log（'focus'）}）
并查看它是否会导致
模糊
触发？我认为你调试的方式才是问题的真正原因，因为chrome inspector（或你正在使用的任何东西）在调试
focus
事件时会引起模糊。你是否尝试过移动它，而不是再次分离和连接它？@Taplar，是的，我试过了，也遇到了同样的问题。请给我们看一下为
blur
和
focus
@guilhermelmi附加事件的代码。也许我说的不对，但我只是指当你点击网页上的输入字段时发生的默认模糊和聚焦事件。我没有写任何专门设置这些事件的东西。除非你是指当我记录你点击输入时触发的事件时控制台中出现的事件消息。明白了！但是您可以通过代码为
blur
和
focus
添加一些监听器，比如
input.addEventListener（'focus'，function（）{console.log（'focus'）}）
并查看它是否会导致
模糊
触发？我认为你调试的方式才是问题的真正原因，因为chrome inspector（或你正在使用的任何东西）在调试
focus
事件时会引起模糊。
if (document.documentElement.clientWidth <= 900) {
    var $search = $(".genesis-nav-menu .menu-item.search");

    $search.detach();
    $(".mobile-top-header-nav").prepend($search);
}