css的pointer-events属性(禁止div点击)

之前写项目经常会碰到某个组件需要禁用的要求，之前一直会用一个变量来代替保存按钮的点击状态，今天才发现css3新出的一个属性，顺便试了试

 

最近刚好在研究vue，直接以vue为案列吧

 

以前的的方法：

//html
<div class="btn" @click="click()">快来点击我</div>

//js
data:{
    isclick: 0,
}

//通过设置一个变量来判断按钮是否执行点击事件的操作(这种方法实际上按钮是可以点击只是阻止了事件的操作)
    click() {
      var that = this;
      if (that.isclick == 1) return;  
      setTimeout(() => {
        that.isclick = 1;
      }, 1000);
    }

动态添加属性来设置组件禁用

//html
 <div class="btn" @click="click()" :class="isclick==1?'disable':''">快来点击我</div>


//css

.btn.disable {
  pointer-events: none;
}

//js

data:{
   isclick:0,
}


 // 添加属性的方法
    click() {
      console.log("可点击,1秒之后之后禁止点击");
      var that = this;
      setTimeout(() => {
        that.isclick = 1;
      }, 1000);
    },