首先要明确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();
}