<h3>单次点击</h3>
<h5>通过animationend实现</h5>
<button class="button button1" id="btn1" oneclick="fn()">按钮1</button>
<h5>纯css实现,需使用onmousedown</h5>
<button class="button button2" onmousedown="fn()">按钮2</button>

.button1{
  animation: once .01s paused forwards;
}
.button1:hover:active{
  animation-play-state:running;
}
@keyframes once {
  to{
    opacity:.8;
  }
}

.button2{
  animation: once2 10s forwards;
}
.button2:hover:active{
      animation-delay:0s
}
@keyframes once2 {
  1%{
    opacity:.5;
    pointer-events:none;
    user-select:none;
    background:red
  }
  100%{
    opacity:.5;
    pointer-events:all;
    user-select:none;
    background:none
  }
}

function fn(ev){
  console.log('5555555')
  //alert('我只能点一次')
}



document.querySelectorAll('.button').forEach(function(el){
  el.addEventListener('animationend',function(){
    // 创建并分发事件
    var event = new CustomEvent("oneclick");
    el.dispatchEvent(event);
    eval(''+this.getAttribute('oneclick')+'');
    if(el['oneclick']){
       el['oneclick'](event);
    }
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.