如何阻止input的focus事件

首先要明确Input标签各种事件的执行顺序，对于点击事件，是按照mousedown -> mouseup -> click这个顺序走的，那么focus事件在哪一步处理的？

直接上代码：

<input
  onFocus={focusHandler}
  onClick={clickHandler}
  onMouseDown={mouseDownHandler}
  onMouseUp={mouseUpHandler}
/>

handlers:

const focusHandler = (e) => {
  console.log('focusHandler');
}

const clickHandler = (e) => {
  console.log('clickHandler');
}

const mouseDownHandler = (e) => {
  console.log('mouseDownHandler');
}

const mouseUpHandler = () => {
  console.log('mouseUpHandler');
}

输出：

那么要阻止focus事件就有两种方法：
1.在mouseDownHandler中阻断默认事件：

const mouseDownHandler = (e) => {
  console.log('mouseDownHandler');
  e.preventDefault();
}

2.在focusHandler中强行设置blur事件：

const focusHandler = (e) => {
  console.log('focusHandler');
  e.target.blur();
}