Question

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

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

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

我试图在触发事件点击时记录某些内容，一切正常，但实际效果并不理想。

＆＃13;

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');
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

CSS

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

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

1 个答案: