背景

周末没有约朋友出去玩，在家闲的无聊，逛起了掘金，看到了同事的文章借助CSS来管理js事件，觉得很有意思，就自己动手实现一下，文章大部分的内容都是来自他的文章。同事的css是真的很强，他用很多css解决了js的问题。像他多多学习

css 能解决js问题

表单元素获取到焦点时样式被修改

给表单元素的xxx:focus{}就可以实现，元素获取到焦点的时候，样式修改

借用 label 修改数据

表单元素禁止点击

对于禁止表单元素点击，我们经常会用到 disabled，元素确实是不可点击并且没有了点击事件。但是对于非表单元素我们就需要写js逻辑去添加样式，逻辑判断。显然代码量不少，那么我们如何用css解决呢？

和表单元素一样，不可点击的元素加上自定义属性disabled，然后给这个元素加上一个属性选择器就好了[disabled]{pointer-events:none;}。还可以美化他的样式，写一个我们ui需要的样式

css pointer-events 禁用事件

长按事件

若不是看到同事的掘金，我怎么也想不到，原来结合css，js还可以做这个操作。厉害了，每次看到同事们用css实现了啥骚操作，减少了很多很多js代码的时候，就想夸他们，当他们解决了我不能解决的问题的时候我更想夸

长按事件实现的原理是，css3中新增了过渡和动画属性(一个不会影响页面样式的属性过渡），js去监听过渡属性开始/进行中/完成的事件，这个事件就是我们所需要的。点击的时候添加一个属性选择器:active

button:hover:active{
  opacity:.99;/**随便选取一个不影响页面的可以过渡的样式**/
  color:red; /** 这里是为了能够看到样式的变化，在变化的过程中完成事件**/
  transition:color 1s;
}

  const button = document.querySelector('button')
  button.addEventListener('transitionend',function(){
    //业务代码
    alert('长按的弹窗')
})

单次点击事件

实现原理是：animationend是动画结束后触发，显然我们可以在这里做文章

css 单次事件