DIV的失去焦点(blur)实现

only_do 发布于2019-08-29 16:23 / 3093人阅读

摘要：用防抖实现鼠标移出消失由于标签本身不支持事件，所以对于点击一个按钮弹出的，我们想要当这个失去焦点的时候，让它消失不能使用的来实现。但是可以利用和事件来实现失去焦点消失的功能。

用防抖实现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")

GPU云服务器云服务器 bootstrap失去焦点 html表单失去焦点 js失去焦点事件 php 失去焦点事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113710.html

DIV的失去焦点(blur)实现

摘要：用防抖实现鼠标移出消失由于标签本身不支持事件，所以对于点击一个按钮弹出的，我们想要当这个失去焦点的时候，让它消失不能使用的来实现。但是可以利用和事件来实现失去焦点消失的功能。用防抖实现DIV鼠标移出消失由于div标签本身不支持onblur事件，所以对于点击一个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使用的onblur来实现。但是可以利用onmous...

Backache 2019-08-23 10:59 评论0 收藏0
DIV的失去焦点(blur)实现

摘要：用防抖实现鼠标移出消失由于标签本身不支持事件，所以对于点击一个按钮弹出的，我们想要当这个失去焦点的时候，让它消失不能使用的来实现。但是可以利用和事件来实现失去焦点消失的功能。用防抖实现DIV鼠标移出消失由于div标签本身不支持onblur事件，所以对于点击一个按钮弹出的div，我们想要当这个div失去焦点的时候，让它消失不能使用的onblur来实现。但是可以利用onmous...

sihai 2019-08-02 11:15 评论0 收藏0
JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点

摘要：焦点事件一般利用这些事件与方法和属性配合。此外，支持一个名为的类似事件，也是在鼠标滚动滚轮时除法。焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有： blur：元素失去焦点，不会冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin； DOMFocusOut：同...

clasnake 2019-08-19 17:23 评论0 收藏0
实现"输入框"获得焦点时外边框变蓝

摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为当输入框获得鼠标焦点时，外...

Coding01 2019-08-21 10:44 评论0 收藏0
实现"输入框"获得焦点时外边框变蓝

摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为当输入框获得鼠标焦点时，外...

e10101 2019-08-28 18:21 评论0 收藏0