Javascript 按钮在Chrome和Firefox上的行为不同

我正在尝试为搜索栏做一个切换按钮。如果用户第一次单击按钮，将显示搜索栏。如果用户第二次单击，并且如果有值（用户已键入），则提交表单。 否则，如果用户在栏外单击，它将关闭

我已经完成了这方面的代码，它在Firefox上运行良好，但在Chrome和Microsoft Edge上不起作用：

• 在Firefox上，单击按钮的不同区域时，其行为相同（打开搜索栏）
• 在Chrome和ME上，当您在按钮边界附近单击时，它会打开搜索栏，但当您在中心附近单击时，它不会打开

我尝试在触发事件click时记录一些内容，一切正常，但实际效果不是很好

var\u sbmButton=document.getElementsByClassName（'eti-srch-sbm'）[0]，
_输入=_sbmButton.etiFindSiblings（'eti-frm-t-s'）[0]，
_frmAction=\u input.parentElement.parentElement，
_logo=document.getElementsByClassName（'eti-logo'）[0]，
单击=0；
_sbmButton.addEventListener（'click'，函数（evt）{
点击++；
_nav.classList.add（'nav-hide'）；
_logo.classList.add（'logo-hide'）；
_frmAction.classList.add（'frm-show'）；
_input.focus（）；
如果（_input.value！=''&&&u frmAction.classList.contains（'frm-show'）&&单击>1）{
_frmAction.children[0].submit（）；//检查搜索栏是否已打开，输入是否正确！=''
}否则{
evt.preventDefault（）；//否则停止提交表单
}
}，假）；
document.addEventListener（'click'，函数（evt）{
var target=evt.target | | evt.src元素；
如果（目标！==\u输入和目标！==\u sbmButton）{//选中并单击外部
单击=0；
_nav.classList.remove（'nav-hide'）；
_logo.classList.remove（'logo-hide'）；
_frmAction.classList.remove（'frm-show'）；
}
});
.eti srch sbm{
位置：绝对位置；
右：1px；
顶部：1px；
背景色：透明；
字号：18px；
宽度：30px；
高度：计算（100%-2px）；
}
图标正在阻止单击。向样式中添加
指针事件：无
，以便单击按钮“通过”

CSS

.eti-srch-sbm .fa{
  pointer-events:none;
}

快速猜测，但我猜图标阻止了点击。尝试在上面添加一个
指针事件：none
。欢迎使用万维网fyi
文档。getElementsByClassName（'eti-srch-sbm'）[0]
很愚蠢。当您知道只想使用第一个类名时，为什么要在整个DOM中搜索与类名匹配的元素？改用
.querySelector（）
。@ScottMarcus是的，谢谢你的建议是的，浏览器已经走过了很长的路，但在边缘情况下它们的行为仍然不同。
指针事件：none
是否修复了任何问题？如果没有，则更新代码段可能会有所帮助，以便它复制问题。我试着把它浓缩成一个最小的例子，但它对我来说是可以点击的。