通过设置元素的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. Java实现字符串编辑距离

    1 问题描述 给定一个源串和目标串,能够进行如下操作: 在任意位置上插入一个字符: 替换掉任意字符: 删除任意字符. 写一个程序,实现返回最小操作次数,使得对源串进行上述这些操作后等于目标串. 2 解 ...

  2. java实现第四届蓝桥杯有理数类

    有理数类 题目描述 有理数就是可以表示为两个整数的比值的数字.一般情况下,我们用近似的小数表示.但有些时候,不允许出现误差,必须用两个整数来表示一个有理数. 这时,我们可以建立一个"有理数类 ...

  3. LB服务:硬件如何被软件取代(上)

    [摘要] 大业务上云,难免要用到LB.可是,您是否了解LB的来龙去脉?本文浅谈一下LB,从硬件走到软件,他们经历了什么转变. 大业务上云,难免要用到LB.可是,您是否了解LB的来龙去脉?本文浅谈一下L ...

  4. python numpy 库

    引用文章:https://blog.csdn.net/xjl271314/article/details/80409034

  5. spring Cloud服务注册中心Eureka集群

    spring Cloud服务注册中心Eureka集群配置: 在application.yml文件加以下配置: server: port: 8761 tomcat: uri-encoding: UTF- ...

  6. 小师妹学JavaIO之:文件系统和WatchService

    目录 简介 监控的痛点 WatchService和文件系统 WatchSerice的使用和实现本质 总结 简介 小师妹这次遇到了监控文件变化的问题,F师兄给小师妹介绍了JDK7 nio中引入的Watc ...

  7. JVM中堆的介绍

    一.堆的概述 一个JVM实例只有一个堆内存,堆也是Java内存管理的核心区域,堆在JVM启动的时候创建,其空间大小也被创建,是JVM中最大的一块内存空间,所有线程共享Java堆,物理上不连续的逻辑上连 ...

  8. MySQL进阶篇(02):索引体系划分,B-Tree结构说明

    本文源码:GitHub·点这里 || GitEE·点这里 一.索引简介 1.基本概念 首先要明确索引是什么:索引是一种数据结构,数据结构是计算机存储.组织数据的方式,是指相互之间存在一种或多种特定关系 ...

  9. 线上排查Class、Jar加载问题的一般方法

    问题背景 本问题源于<ojdbc6中OraclePreparedStatement的ArrayIndexOutOfBoundsException异常BUG-6396242>这篇博文中最后思 ...

  10. MFC exe文件生成的图标更改方法

    MFC exe文件生成的图标更改方法 https://blog.csdn.net/txwtech/article/details/92980545