一行代码教你不用js，也能阻止鼠标事件

高山仰止、景行行止

已于 2023-06-14 10:06:12 修改

阅读量143

点赞数

分类专栏： css 文章标签： javascript 前端 css

于 2023-06-14 10:03:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56527169/article/details/131201592

版权

css 专栏收录该内容

2 篇文章

订阅专栏

项目开发中，有时需特定条件触发用户响应事件，未达条件时阻止触发常用监听事件、条件渲染、操作dom层等方法。实际上，CSS也能控制事件不响应，如设置pointer-events: none属性可使按钮点击事件无法触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在项目开发中，有时需要某个条件触发时才给用户响应事件，条件没达到时那该怎么不让用户触发呢，常用的无非以下几种：

1.监听事件，根据判断条件去实现是否执行

2.加上条件渲染

3.操作dom层

那么其实css也能控制事件不去响应

 <button  @click="addToCar" class="btn" >
      Add to Car
 </button>

const addToCar = () => {
    debugger
}

.btn {
            width: 295px;
            height: 75px;
            border-radius: 50px;
            margin-top: 45px;
            font-size: 18px;
            border: 0;
            background-color: #000;
            cursor: pointer;
            pointer-events: none;
            color:#fff;
            opacity: .4;
        }

上面代码中可以看到有一个属性：pointer-events: none;添加了这个css属性设置为none以后，那么我们的按钮点击事件根本无法触发响应