让你的:active好好工作

Posted 2020-07-10 zyip

在某些版本的safari上，：active伪类不生效，可以通过css和js两种方式hack一下：

html

  <div class="button">
    点击时我应该变红
  </div>
  

 

css

.button{
  display:block;
  width:200px;
  height:40px;
  margin-top:10px;
  border-radius:6px; 
  border:1px solid #ccc;
  line-height:40px;
  text-align:center;
  
  
}

.button:active,
.button.active // this is for js hack
{
  background-color:red; 
  cursor:pointer;/*mind add this line to make your work easy*/
}

 

javascript

document.addEventListener(‘DOMContentLoaded‘,function(){
  //we will add the .active class the elements which has a .button class
  document.body.addEventListener(‘touchstart‘,function(eve)   {
    if(eve.target.classList.contains(‘button‘))
    {
          eve.target.classList.add(‘active‘);
    }
  });  
  
  //remove the .active when you finish the touch event
  document.body.addEventListener(‘touchend‘,function(eve)   {
    if(eve.target.classList.contains(‘button‘))
    {
        eve.target.classList.remove(‘active‘);
    }
  });  
  
});

 

 

online demo

 

JS Bin on jsbin.com