#yyds干货盘点#用css做事件监听

平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信可以带来不一样的体验。

hover 延时触发

有这样一个场景,在鼠标停留在一个元素上​1s​后才触发事件,不满​1s​就不会触发,这样的好处是,可以避免鼠标在快速划过时,频繁的触发事件。如果是用​js​来实现,可能会这样

var timer = null
el.addEventListener('mouseover', () => {
timer && clearTimeout(timer)
timer = setTimeout(() => {
// 具体逻辑
}, 1000)
})

是不是这样?等等,这样还没完,这样只做到了延时,鼠标离开以后还是会触发,还需要在鼠标离开时取消定时器

el.addEventListener('mouseout', () => {
timer && clearTimeout(timer)
})

另外,在使用mouseout​时还需要考虑 ​​dom​​​ 嵌套结构,因为这些事件在​父级 -> 子级​​的过程中仍然会触发,总之,细节会非常多,很容易误触发。

现在转折来了,如果借用 CSS 就可以有效地避免上述问题,如下,先给需要触发的元素加一个有延时的​​transition​

button:hover{
opacity: 0.999; /*无关紧要的样式*/
transition: 0s 1s opacity; /*延时 1s */
}

这里只需一个无关紧要的样式就行,如果​opacity​已经使用过了,可以使用其他的,比如​transform:translateZ(.1px)​,也是可行的。然后添加监听​transitionend​方法

el.addEventListener('transitionend', () => {
// 具体逻辑
})

这就结束了。无需定时器,也无需取消,更无需考虑 ​dom​ 结构,完美实现。

长按触发事件

长按也是一个比较常见的需求,它可以很好的和点击事件区分开来,从而赋予更多的交互能力。

但是原生​​js​​中却没有这样一个事件,如果要实现长按事件,通常需要借助定时器和鼠标按下事件,如下

el.onmousedown = function(){
this.timer && clearTimeout(this.timer);
this.timer = settimeout(function(){
//业务代码
},1000)
}
el.onmouseup = function(){
this.timer && clearTimeout(this.timer);
}

又是定时器和取消定时器的场景,和前面一个例子有些类似,也可以借助 CSS 来实现,由于是鼠标按下,可以联想到​:active​,因此可以这样来实现

button:hover:active{
opacity: .999; /*无关紧要的样式*/
transition: opacity 1s; /*延时 1s */
}

然后再监听​transitionend​方法

el.addEventListener('transitionend', () => {
// 具体逻辑
})
发表评论

相关文章