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

Posted 2022-09-21 尼羲

平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 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, () => 
  // 具体逻辑
)

讲了这么多，小伙伴们实践一下，是不是很带劲。