通过设置元素的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

    1 空瓶换汽水 浪费可耻,节约光荣.饮料店节日搞活动:不用付费,用3个某饮料的空瓶就可以换一瓶该饮料.刚好小明前两天买了2瓶该饮料喝完了,瓶子还在.他耍了个小聪明,向老板借了一个空瓶,凑成3个,换了一 ...

  2. 阿里巴巴 《Java 开发者手册》+ IDEA编码插件

    4月22日,阿里巴巴发布了泰山版<Java 开发手册>,以前以为终极版就真的是终极版了,没想到还是想的太简单了,继终极版之后又发布了详尽版.华山版,这不,泰山版又来了.想想也对,行业一直在 ...

  3. Promise相关学习

    what? Promise对象表示一个异步操作的最终状态(完成或失败),以及其返回的值 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/ ...

  4. .net core3.1 abp动态菜单和动态权限(思路) (二)

    ps:本文需要先把abp的源码下载一份来下,跟着一起找实现,更容易懂 在abp中,对于权限和菜单使用静态来管理,菜单的加载是在登陆页面的地方(具体是怎么知道的,浏览器按F12,然后去sources中去 ...

  5. 写了个全局变量的bug,被同事们打脸!!!

    话说栈长前阵子写了一个功能,测试 0 bug 就上线了,上线后也运行好好的,好多天都没有人反馈bug,超爽.. 不出问题还好,出问题就是大问题.. 最近有个客户反馈某些数据混乱问题,看代码死活看不出什 ...

  6. 学习nginx从入门到实践(五) 场景实践之静态资源web服务

    一.静态资源web服务 1.1 静态资源 静态资源定义:非服务器动态生成的文件. 1.2 静态资源服务场景-CDN 1.3 文件读取配置 1.3.1 sendfile 配置语法: syntax: se ...

  7. 在CentOS7上源码安装OpenResty

    您必须将这些库perl 5.6.1+libreadlinelibpcrelibssl安装在您的电脑之中. 对于 Linux来说, 您需要确认使用 ldconfig 命令,让其在您的系统环境路径中能找到 ...

  8. Nice Jquery Validator DOM 绑定

    针对表单的绑定 示例:在 form 上绑定 data-validator-option 来配置参数 <form data-validator-option='{stopOnError:false ...

  9. pom.xml 文件详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  10. @codeforces - 506C@ Mr. Kitayuta vs. Bamboos

    目录 @description@ @solution@ @accepted code@ @details@ @description@ n 个竹子,第 i 个竹子初始高度 hi,在每天结束时将长高 a ...