css实现禁止点击的方法

本文探讨如何通过cursor:not-allowed实现视觉禁用效果,同时利用pointer-events:none阻止事件触发,两者结合防止用户交互。了解这两种CSS属性在实际开发中的应用技巧。

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

1. 不可点击样式

cursor:not-allowed

该方法只能实现样式为不可点击,但是点击仍然会触发相应的是事件。 

2. 禁止触发事件

pointer-events:none

 

该样式会阻止默认事件的发生,但鼠标样式会变成箭头样子。

如果同时使用这两种样式,会阻止事件的触发,但鼠标并不会显示禁止样式,而是箭头样式。

在实际开发中,我们可以使用cursor:not-allowed;然后编写js逻辑阻止事件的发生。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值