DIV的失去焦点(blur)实现
2024-08-28 07:59:23
用防抖实现DIV鼠标移出消失
由于div标签本身不支持onblur
事件,所以对于点击一个按钮弹出的div
,我们想要当这个div
失去焦点的时候,让它消失不能使用的onblur
来实现。
但是可以利用onmouseout
和事件来实现DIV失去焦点消失的功能。直接使用onmouseout
来实现移出消失可能会有一个问题:假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmouseout
事件,从而没什么卵用。
利用防抖、onmouseout
、onmouseover
组合来实现一个体验很好的blur事件
/**
*鼠标移动过div事件
*/
function moveOverEvent(ele,outTimer) {
let overTimer = null;
return function(){
clearTimeout(outTimer); //div没有消失的情况下,在移动进来div,那么就清除上次移出的事件
clearTimeout(overTimer); //防抖
overTimer = setTimeout(()=>{
ele.style.display = "block";
},500);
}
}
/**
* 鼠标移出
*/
function moveOutEvent(ele,outTimer) {
return function(){
clearTimeout(outTimer); //防抖
outTimer = setTimeout(()=>{ //移动出去后等500ms,在消失这div
ele.style.display = "none";
},500);
}
}
然后无意中发现一个可以通过给div添加tabindex属性,从而实现blur事件,所以上面的代码可能是白写了。(PS 我感觉上面的体验会好一些,减少了很多误触)
//设置了tabindex后,元素默认加虚线,通过ouline=0进行去除(IE设置hidefocus="true")
<div tabindex="0" outline=0" hidefocus="true"></div>
最新文章
- python logging模块
- hdu-1823 Luck and Love
- php中的编码问题
- Android中scrollview嵌套HorizontalScrollView卡顿现象解决
- 【LR】安装LR11后遇到的问题
- because it is not a variable 编译错误解决方案
- POJ2286 The Rotation Game(IDA*)
- LXPanel自定义添加应用程序到快速启动栏
- KMP学习
- javascript运算符整理
- NGUI使用教程(3) 使用外部图片制作Atlas(图集)
- Spring Boot获取前端页面参数的几种方式总结
- 017_python常用小技巧
- SQL Server 优化
- python SSH客户端的交互式和非交互方式
- 【工具相关】Web-ionic-ionicLab的使用
- Rinkeby中测试币的申请
- 18位身份证验证(Java)
- Vue 1.0 和 2.0 执行顺序
- OpenLayers 比较有用的对象和属性