Hover 悬浮延时

简介

CSS的延时操作通常使用hover,原生js的延时操作通常使用mouseover+mouseout和mouseenter+mouseleave,jQuery使用hover()方法;但是这三个方法要么不够灵敏,要么产生冒泡情况,要么随着鼠标移入移出而反复执行一个事件。本框架使用axHover插件来执行悬浮延时事件。

axHover

axHover主要是解决两个问题:

一是判断是误操作还是刻意操作。当鼠标快速经过目标时应该被当做误触发而不执行任何mouseenter或mouseover事件;当鼠标缓慢经过目标则应该视为有意识的去触发mouseenter或mouseover事件。

二是离开目标后是依然保持enter状态。比如进入目标后显示一个外围的Dom,当鼠标快速移动到这个Dom,那么应该保持Dom的显示状态。

axHover是一个class类,需要使用new关键字创造实例。完整写法:new axHover(elem,options),参数说明如下:

  • elem:必填项,可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • options:必填项,具体的参数如下:
    • timeout:离开元素后多久触发leave事件,单位毫秒,默认50
    • interval:进入元素后检查光标位置的间隔时间,默认80
    • sensitivity:间隔检查距离,如果在interval事件内移动距离小于该值则执行enter事件,默认7
    • enter:进入元素后执行的事件,是一个函数,例如function(){}
    • leave:离开元素后执行的事件,是一个函数,例如function(){}
    • hold:选填项,让其他元素保持enter状态,可以填"#id"、".className"、"div"等原生选择器以及Dom对象

举例:new axHover('#demo', {enter:function(){console.log('进入了')},leave:function(){console.log('离开了')}})

显示隐藏

  •                                             <a href="###" class="ax-btn hover" inhover>显示隐藏<span>中国!</span></a>
                                            
  •                                             new axHover("#inhover", {
                                                    enter: function () {
                                                        this.targetDom.querySelector('span').style.display = 'block'
                                                    },
                                                    leave: function () {
                                                        this.targetDom.querySelector('span').style.display = 'none'
                                                    }
                                                })
                                            
  •                                             .hover span {
                                                    padding: 0 1.4rem;
                                                    border: 1px solid #ebebeb;
                                                    border-radius: .3rem;
                                                    background-color: #fff;
                                                    position: absolute;
                                                    left: 0;
                                                    top: calc(100% + .8rem);
                                                    display: none;
                                                }
                                            

在enter和leave函数内可使用如下变量:

  • this.targetDom:移动目标对象的节点
  • this.hold:保持状态对象的节点
  • this.options:实例的参数

灵敏度

如果希望提高执行enter事件的灵敏度,那么可将sensitivity值设高一些;如果希望降低灵敏度,将sensitivity值设低一些;sensitivity默认值是7。

对于下面三个例子,可尝试让鼠标用不同速度经过按钮,对比灵敏度。

  •                                     <a href="###" class="ax-btn hover" id="sen7">默认灵敏度7<span>中国!</span></a>
                                        <a href="###" class="ax-btn hover" id="sen20">很灵敏,灵敏度20<span>中国!</span></a>
                                        <a href="###" class="ax-btn hover" id="sen1">不灵敏,灵敏度1<span>中国!</span></a>
    
                                            
  •                                             new axHover("#sen7", {
                                                    sensitivity: 7,
                                                    enter: function () {
                                                        this.targetDom.querySelector('span').style.display = 'block'
                                                    },
                                                    leave: function () {
                                                        this.targetDom.querySelector('span').style.display = 'none'
                                                    }
                                                })
                                                new axHover("#sen20", {
                                                    sensitivity: 20,
                                                    enter: function () {
                                                        this.targetDom.querySelector('span').style.display = 'block'
                                                    },
                                                    leave: function () {
                                                        this.targetDom.querySelector('span').style.display = 'none'
                                                    }
                                                })
                                                new axHover("#sen1", {
                                                    sensitivity: 1,
                                                    enter: function () {
                                                        this.targetDom.querySelector('span').style.display = 'block'
                                                    },
                                                    leave: function () {
                                                        this.targetDom.querySelector('span').style.display = 'none'
                                                    }
                                                })
                                            
  •                                             .hover span {
                                                    padding: 0 1.4rem;
                                                    border: 1px solid #ebebeb;
                                                    border-radius: .3rem;
                                                    background-color: #fff;
                                                    position: absolute;
                                                    left: 0;
                                                    top: calc(100% + .8rem);
                                                    display: none;
                                                }
                                            

保持状态

使用hold参数可以让某Dom保持enter状态,典型的用法是:当显示隐藏的元素并不在按钮内部,如果不使用hold参数,当鼠标移开按钮会自动隐藏该元素;如果使用hold参数后,当鼠标迅速移开按钮并迅速进入该元素,那么该元素依然保持显示状态(enter状态)。

  •                                             <a href="###" class="ax-btn" id="hold">迅速移入气泡看看,还在!</a>
                                                <a href="###" class="ax-btn" id="nohold">迅速移入气泡看看,消失!</a>
                                                <div class="out" id="holdcon">稳定的中国!</div>
                                                <div class="out" id="noholdcon">消失的美国!</div>
                                            
  •                                             new axHover("#hold", {
                                                    enter: function () {
                                                        document.querySelector('#holdcon').style.display = 'block';
                                                    },
                                                    leave: function () {
                                                        document.querySelector('#holdcon').style.display = 'none'
                                                    },
                                                    hold:'#holdcon',
                                                })
                                                new axHover("#nohold", {
                                                    enter: function () {
                                                        document.querySelector('#noholdcon').style.display = 'block';
                                                    },
                                                    leave: function () {
                                                        document.querySelector('#noholdcon').style.display = 'none'
                                                    },
                                                })
                                            
  •                                             .out {
                                                    margin:.8rem 0;
                                                    padding: 0 1.4rem;
                                                    border: 1px solid #ebebeb;
                                                    border-radius: .3rem;
                                                    background-color: #fff;
                                                    display: none;
                                                }