通过设置元素的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如何设置不可点击?的更多相关文章

  1. agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. TERSUS无代码开发(笔记04)-CSS样式设置

    CSS样式设置 1.常用显示样式 大小尺寸 说明  间距边距 说明  各类颜色 说明  width 宽 margin 外边距         color  颜色        height 高 pad ...

  3. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  4. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  5. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  6. EXTJS 4.2 资料 控件之btn设置可否点击

    1.下面是一个btn按钮的代码,默认不可以点击 { id: 'skipStep3', disabled: true,//默认不可点击 text: "跳转第三步", handler: ...

  7. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

  8. 设置 cell点击 背景色

    //设置 cell点击 背景色 cell.selectionStyle = UITableViewCellSelectionStyleDefault; cell.selectedBackgroundV ...

  9. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

随机推荐

  1. 实用!看Python如何光速合并多个PDF

    大家好,今天分享一个实用的办公脚本:将多个PDF合并为一个PDF, 例如我手上现在有如下3个PDF分册,需要整合成一个完整的PDF. 如果换成你操作的话,是不是打开百度搜索:PDF合并,然后去第三方网 ...

  2. java创建透明背景的PNG图片加自定义文字水印

    人在码上走,需求天天有.这不,今天前端让我返回一个带自定义水印的背景图片.一通google,有现成的代码,但是基本是直接在源图上添加水印,生成出来的文字样式也没有控制好,看来又只有自己造轮子了. 过程 ...

  3. cacti 流量断图

    问题描述 Cacti监控系统新增了一台设备,后来查询流量的时候发现流量不太对,客户跑的流量远不止8M, 下边就是记录一下问题解决的过程了. 解决过程   看到 rrdtool info 2331.rr ...

  4. arduino 的analogRead() 和analogWrite()

    模拟输入analogRead()函数的返回值范围是0 到1023; 而模拟输出analogWrite()函数的输出值范围是0 到255; 所以: val = analogRead(potpin); / ...

  5. Linux防火墙iptables详解

    iptables详解(思维导图) 1. 概述 1.1 iptable简介 1.2 防火墙的种类 1.3 netfilter 2. iptables的工作流程 2.1 iptables工作图示 2.2 ...

  6. UDF_获取某年某月有多少天

    UDF --获取某年某月有多少天 --drop function fn_GetDayofMonth_1 /* HLERP ( [dbo].[GetMonths] ) */ go create func ...

  7. XAI/MLI 可解释机器学习系列1- 开源&paper汇总

    一直在关注可解释机器学习领域,因为确实在工作中有许多应用 模型检查,特征重要性是否符合预期和AUC一样重要 模型解释,比起虚无缥缈的模型指标,解释模型学到的规律更能说服业务方 样本解释,为什么这些用户 ...

  8. idea同时选中多个相同的内容并编辑

    原文链接: 首先选中你需要编辑的内容,然后Ctrl+R屏幕上会出现如下的操作栏 第一个框是查询并选中所有相同的内容第二个框是输入你要修改的内容,最后点击Replace all,就可以把所有内容替换.

  9. Charles 安装证书后依旧抓取不到https请求的解决方案

    1.打开charles——>help——>SSL proxying——>Install Charles Root Certificate 证书安装后,抓取https的包 2.查看Pr ...

  10. 简易的phpexcel导出柱状图

      首先得把phpexcel扩展的源码拷贝到项目文件下 下面是代码   /** 引入最重要的PHPExcel类库的入口文件 */ require(STK_PATH.'/class/stk/PHPExc ...