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

最新推荐文章于 2024-05-13 17:35:36 发布

原创最新推荐文章于 2024-05-13 17:35:36 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pointer-events属性 #css3标签的禁用属性

js 同时被 2 个专栏收录

52 篇文章

订阅专栏

html+css

29 篇文章

订阅专栏

本文介绍了一种使用CSS3属性禁用按钮的新方法，替代了传统的通过JS变量控制按钮点击状态的做法。通过动态添加CSS类实现组件禁用，提高了用户体验和代码效率。

之前写项目经常会碰到某个组件需要禁用的要求，之前一直会用一个变量来代替保存按钮的点击状态，今天才发现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);
    },