DIV的失去焦点(blur)实现方法
用防抖实现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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
栏 目:CSS/HTML
下一篇:html页面中完成查找功能
本文标题:DIV的失去焦点(blur)实现方法
本文地址:https://www.xiuzhanwang.com/a1/CSS_HTML/9520.html
您可能感兴趣的文章
- 04-02好看的字体样式css,好看的字体样式图片
- 04-02分页样式css,分页样式栏里用来定义首页的属性
- 04-02css样式的引入,css样式怎么引入
- 04-02css样式引入方式有几种,网页引入css样式有几种方式
- 04-02css滚动条样式,css滚动条的样式
- 04-02html中加入css样式的简单介绍
- 04-02内嵌样式css,内嵌样式表,内部样式表,外部样式表中优先级最高的
- 04-02vue中的css样式布局,vue添加css样式
- 01-10通过html为FLASH加链接的实现代码(div层)
- 01-10html用style添加属性示例
阅读排行
本栏相关
- 04-02表格样式css样式,css样式表单
- 04-02好看的字体样式css,好看的字体样式图
- 04-02分页样式css,分页样式jq
- 04-02分页样式css,分页样式栏里用来定义首
- 04-02css样式的引入,css样式怎么引入
- 04-02css滚动条样式,css滚动条的样式
- 04-02css样式引入方式有几种,网页引入css样
- 04-02html中加入css样式的简单介绍
- 04-02vue中的css样式布局,vue添加css样式
- 04-02内嵌样式css,内嵌样式表,内部样式表
随机阅读
- 01-10C语言打印杨辉三角示例汇总
- 01-10bat批处理彻底隐藏文件的方法(使用
- 01-10C++实现将数组中的值反转
- 01-10C++ 类访问控制的条件总结
- 01-11常用的HTML富文本编译器UEditor、CKEdi
- 08-05DEDECMS点击主栏目默认显示第一个子栏
- 08-05织梦dedecms首页调用缩略图为背景
- 08-05dedecms织梦模板全站调用收藏数的方法
- 01-10vue实现分页加载效果
- 08-05dedecms织梦模板编辑文档的同时自动更