如何阻止input的focus事件

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

直接上代码：

<inputonFocus={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();
}

如何阻止input的focus事件相关推荐

input的focus事件阻止冒泡
在写界面的时候,选中一个输入框,就会弹出一个弹窗.还需要做可清除. 在加了clearable属性之后,就遇到问题了.点击 X 图标进行清楚之后,弹窗也会打开. 注意:我这里使用的是vxe-input, ...
css阻止input select默认事件
css样式中设置 pointer-events : none; 所有的事件都不会触发包括触发焦点等. 转载于:https://www.cnblogs.com/vbluebirdv/archive/2 ...
ios的H5页面input触发onfocus事件无效解决方案
ios的H5页面使用input时,在修改input的value的值时,不会触发onfocus事件.解决方案: <div class="input_type" style=&q ...
mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)
这里写目录标题 mouseEvent事件知识卡片关于mouse位置的几个坐标描述 focus聚焦事件 input事件节流(thorttle): mouseWheel(滚轮事件) mouseEve ...
jquery兼容IE和火狐下focus()事件
<input type="text" id="my" name="my" /> <script type="te ...
用户表单事件(focus事件)
以前做用户系统的时候经常用到表单验证,正则表达式事件来处理和绑定事件和进行事件,这里说的其实只是一小部分,也不是很值得写,但是今天遇到了还是写一下,毕竟基础还是蛮重要的,就算懂的童鞋,巩固一下也是好的 ...
jQuery中blur和focus事件的应用
本文转自:http://blog.csdn.net/gaolinwu/article/details/7240674 jQuery中blur和focus事件的应用一.需求原因在填写表单时需要实现如 ...
reactinput聚焦事件_React focus 事件的坑
React 的 focus 事件实现有问题 React 的 focus 事件会冒泡,但是原生 DOM 的 focus 事件是不冒泡的: 原生 DOM 的 focusin 事件是会冒泡的,但是现在 Re ...
uniapp 实现微信聊天效果阻止input失焦
前景:需要开发一个聊天系统,界面需要和微信一样,输完内容直接点发送内容,内容发送完成,但input不失焦,发送可以用input的@confirm事件执行,也可以是在别的dom上绑定发送.遇到两个难点 ...

如何阻止input的focus事件

如何阻止input的focus事件相关推荐

最新文章

热门文章