按钮在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-ts" 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;
}