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

Question

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

我为此完成了代码，它在 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>

Answer 1

图标阻止了点击。将 pointer-events:none 添加到样式中，使点击“传递”到按钮。

CSS

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