按鈕在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;
}