设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 115|回复: 18

DIV的失去焦点(blur)实现方法

[复制链接]

4

主题

58

回帖

203

积分

中级会员

积分
203
发表于 2024-4-20 10:33:00 | 显示全部楼层 |阅读模式
用防抖实现DIV鼠标移出消失
由于div标签本身不支持onblur事件,所以对于点击一个按钮弹出的div,我们想要当这个div失去焦点的时候,让它消失不能使用的onblur来实现。
但是可以利用onmouseout和事件来实现DIV失去焦点消失的功能。直接使用onmouseout来实现移出消失可能会有一个问题:假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmouseout事件,从而没什么卵用。
利用防抖、onmouseout、onmouseover组合来实现一个体验很好的blur事件
  1.     /**
  2.      *鼠标移动过div事件
  3.      */
  4.     function moveOverEvent(ele,outTimer) {
  5.         let overTimer = null;
  6.         return function(){
  7.             clearTimeout(outTimer);     //div没有消失的情况下,在移动进来div,那么就清除上次移出的事件
  8.             clearTimeout(overTimer);    //防抖
  9.             overTimer = setTimeout(()=>{        
  10.                 ele.style.display = "block";
  11.             },500);                     
  12.         }
  13.     }
  14.     /**
  15.      * 鼠标移出
  16.      */
  17.     function moveOutEvent(ele,outTimer) {
  18.         return function(){
  19.             clearTimeout(outTimer);         //防抖
  20.             outTimer = setTimeout(()=>{     //移动出去后等500ms,在消失这div
  21.                 ele.style.display = "none";
  22.             },500);
  23.         }
  24.     }
复制代码
然后无意中发现一个可以通过给div添加tabindex属性,从而实现blur事件,所以上面的代码可能是白写了。(PS 我感觉上面的体验会好一些,减少了很多误触)
  1. //设置了tabindex后,元素默认加虚线,通过ouline=0进行去除(IE设置hidefocus="true")
  2. <div tabindex="0" outline=0" hidefocus="true"></div>
复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

2

主题

45

回帖

135

积分

注册会员

积分
135
发表于 2024-4-22 01:44:23 | 显示全部楼层
好用好用

0

主题

39

回帖

79

积分

注册会员

积分
79
发表于 2024-6-13 15:11:08 | 显示全部楼层
我不确定这个信息的准确性,请再确认一下
发表于 2024-7-4 17:19:20 | 显示全部楼层
同意!

1

主题

51

回帖

121

积分

注册会员

积分
121
发表于 2024-7-19 23:17:33 | 显示全部楼层
我们一起努力,共同解决问题吧。

0

主题

30

回帖

63

积分

等待验证会员

积分
63
发表于 2024-8-3 10:55:27 | 显示全部楼层
友善的讨论氛围是非常重要的。

0

主题

54

回帖

106

积分

注册会员

积分
106
发表于 2024-8-7 16:06:10 | 显示全部楼层
说得太好了,完全同意!
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:14
  • 最近打卡:2024-04-23 13:38:52

1

主题

43

回帖

123

积分

注册会员

积分
123
发表于 2024-8-12 11:39:02 | 显示全部楼层
我不确定这个信息的准确性,请再确认一下

2

主题

40

回帖

126

积分

注册会员

积分
126
发表于 2024-8-16 17:05:37 | 显示全部楼层
我不太确定,可能需要再确认一下。

2

主题

82

回帖

207

积分

中级会员

积分
207
发表于 2024-8-19 13:05:25 | 显示全部楼层
友善的讨论氛围是非常重要的。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:12 , Processed in 0.160425 second(s), 45 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表