css如何设置不可点击?
通过设置元素的pointer-events属性设置为none,来实现元素不可点击。此方法是通过设置元素的鼠标事件失效来实现元素不可点击。
css设置不可点击:
css代码:
.disable {
pointer-events: none;
}
示例:
const disabled = true;
<Button className={disabled ? 'disabled' : null}>点击</Button><style>
.disabled {
pointer-events: none;
// 设置pointer-events: none;再设置cursor是没有效果的
}</style>
效果图:

注意:
pointer-events 的值为 none 时,如果元素上绝对定位,那在它下一层的元素可以被选中。
pointer-events: none; 只是用来禁用鼠标的事件,通过其他方式绑定的事件还是会触发的,比如键盘事件等。
如果将一个元素的子元素 pointer-events 设置成其他值(比如:auto),那么当点击子元素时,还是会通过事件冒泡的形式出发父元素的事件。
以上就是css如何设置不可点击?的详细内容,更多请关注html中文网其它相关文章!
css如何设置不可点击?的更多相关文章
- agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TERSUS无代码开发(笔记04)-CSS样式设置
CSS样式设置 1.常用显示样式 大小尺寸 说明 间距边距 说明 各类颜色 说明 width 宽 margin 外边距 color 颜色 height 高 pad ...
- 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- EXTJS 4.2 资料 控件之btn设置可否点击
1.下面是一个btn按钮的代码,默认不可以点击 { id: 'skipStep3', disabled: true,//默认不可点击 text: "跳转第三步", handler: ...
- 超链接字体颜色设置(通过html/css的设置方法)
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...
- 设置 cell点击 背景色
//设置 cell点击 背景色 cell.selectionStyle = UITableViewCellSelectionStyleDefault; cell.selectedBackgroundV ...
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
随机推荐
- 11.经典O(n²)比较型排序算法
关注公号「码哥字节」修炼技术内功心法,完整代码可跳转 GitHub:https://github.com/UniqueDong/algorithms.git 摘要:排序算法提多了,很多甚至连名字你都没 ...
- 架构C02-商业模式与架构设计
商业模式与架构设计:A段架构与B段架构 <思考软件创新设计:A段架构师思考技术> A段架构师必须具备鲜活的创新思维,睿智的策略思考,犀利的洞察力和灵活的战术才能把握稍纵即逝的商机 ...
- 关于vue不能像angular深度克隆数据解决办法
vue要让数据源实现响应式前提必须要在初始化的时候有这个属性 如果没有这个属性,也可实现数据实时响应.解决方法: this.数组/对象.spice(0,1,'属性值') Vue.set(要修改的数组或 ...
- iic uart spi
第一个区别当然是名字: SPI(Serial Peripheral Interface:串行外设接口); I2C(INTER IC BUS) UART(Universal Asynch ...
- SuperSlide之属性targetCell介绍
禁用页面菜单js代码: <script type="text/javascript"> document.oncontextmenu=function(){ retur ...
- Chosen by god【组合数打表】
Chosen by god 题目链接(点击) Everyone knows there is a computer game names "hearth stone", recen ...
- UDF_表值函数与标量函数的区别_分割字符串成单个的字符并返回表(插入到表中)
UDF_区别_分割字符串成单个的字符并返回表(插入到表中) /* SQL表值函数和标量值函数的区别 实验环境:SQL Server 2014,参考maomao365有改编 在sqlserver中存储过 ...
- 关于mybatis使用小于号大于号出错的解决方案
原文链接:https://blog.csdn.net/weixin_38061311/article/details/99943807 mybatis 使用的xml的映射文件, 所以里面的标签都是在& ...
- Loadrunner12将fiddler跟踪文件转为脚本的后续处理事项
之前一篇文章说过,Loadrunner12是支持将fiddler的跟踪文件.SAZ直接转成LR的脚本的,好多小伙伴都用了这个方法,但是生成脚本后用LR11运行的时候就出问题了,会发现runtime-s ...
- 大众点评cat实时监控简介及部署
简介 背景 CAT(Central Application Tracking)是由吴其敏(前大众点评首席架构师,现携程架构负责人)主导设计基于Java开发打造的实时应用监控平台,为大众点评网提供了全面 ...