input中blur失去焦點事件與點擊事件沖突時如何解決

方法一

使用setTimeout

$(function(){
  $(".cy-name-input input").on({
    focus:function() {
      $(".cy-close").css('display','block');
    },
    blur:function() {
      setTimeout(function(){
        $(".cy-close").css('display','none');
      },0)
    }
  })
  $(".cy-close").click(function(){
    $(".cy-name-input input").val('');
  })
})

方法二

只要給按鈕設置 mousedown 事件，並在其中 event.preventDefault() 就可以了

// html
<input type="text" autofocus="autofocus">
<button>點擊我文本輸入框不會失去焦點</button>

// javascript
var btn = document.querySelector('button')
btn.onmousedown = function(event) {event.preventDefault()}

想要點擊按鈕，觸發按鈕的 click 事件，但又不想觸發 input 的 blur 事件。 這里面的問題就在於，當我們點擊按鈕的時候，文本框失焦，這是瀏覽器的默認事件。當你點擊按鈕的時候，會觸發按鈕的 mousedown 事件，mousedown 事件的默認行為是使除了你點擊的對象之外的有焦點的對象失去焦點。所以只要在 mousedown 事件中阻止默認事件發生就可以了！