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

【问题标题】：Button behaves differently on Chrome and Firefox按钮在 Chrome 和 Firefox 上的行为不同
【发布时间】：2017-12-20 17:01:59
【问题描述】：

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

我完成了此代码，它在 Firefox 上运行良好，但在 Chrome 和 Microsoft Edge 上无法运行：

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

我尝试在触发事件点击时记录一些东西，一切正常，但实际结果不是那么好。

var _sbmButton = document.getElementsByClassName('eti-srch-sbm')[0],
  _input = _sbmButton.etiFindSiblings('eti-frm-t-s')[0],
  _frmAction = _input.parentElement.parentElement,
  _logo = document.getElementsByClassName('eti-logo')[0],
  click = 0;
_sbmButton.addEventListener('click', function(evt) {
  click++;
  _nav.classList.add('nav-hide');
  _logo.classList.add('logo-hide');
  _frmAction.classList.add('frm-show');
  _input.focus();
  if (_input.value !== '' && _frmAction.classList.contains('frm-show') && click > 1) {
    _frmAction.children[0].submit(); //Check if the searchbar has been opened and the input !== ''
  } else {
    evt.preventDefault(); //Else stop submitting the form
  }
}, false);
document.addEventListener('click', function(evt) {
  var target = evt.target || evt.srcElement;
  if (target !== _input && target !== _sbmButton) { //Check click outside
    click = 0;
    _nav.classList.remove('nav-hide');
    _logo.classList.remove('logo-hide');
    _frmAction.classList.remove('frm-show');
  }
});

.eti-srch-sbm {
  position: absolute;
  right: 1px;
  top: 1px;
  background-color: transparent;
  font-size: 18px;
  width: 30px;
  height: calc(100% - 2px);
}

<form name="search-top" method="get" class="eti-frm-t" action="search">
  <input class="eti-frm-t-s" type="text" name="q" placeholder="Search..." autocomplete="off">
  <button class="eti-srch-sbm"><i class="fa fa-search"></i></button>
</form>

【问题讨论】：

快速猜测，但我猜该图标会阻止点击。尝试在其上添加pointer-events:none。
欢迎来到万维网
仅供参考document.getElementsByClassName('eti-srch-sbm')[0] 是愚蠢的。当您知道只想使用第一个元素时，为什么要在整个 DOM 中搜索与类名匹配的元素？请改用.querySelector()。
@ScottMarcus 是的，谢谢你的建议
是的，浏览器已经走了很长一段路，但它们在边缘情况下的行为仍然不同。 pointer-events:none 解决了什么问题吗？如果没有，它可能有助于更新 sn-p 以便它复制问题。我试着把它简化为一个最小的例子，但它对我来说是可以点击的。

标签： javascript html css google-chrome

【解决方案1】：

图标阻止了点击。将pointer-events:none 添加到样式以使点击“通过”按钮。

CSS

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

【讨论】：