设置html按钮点击事件无效果,css怎么设置按钮不能点击？

css怎么设置按钮不能点击？下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

想要按钮不能点击可以通过设置按钮点击事件失效来实现；而在CSS中，可以使用pointer-events属性来实现点击事件失效。

pointer-events属性除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。实现按钮上的点击事件失效。

visible | painted | fill | stroke | all

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：auto：与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同

none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

visiblePainted：只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值；visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值

visibleFill：只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。

visibleStroke

只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。

visible

只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。

说明：

设置或检索在何时成为属性事件的target。使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

对应的脚本特性为pointerEvents。

示例：

a{pointer-events: none;}

HTML中文网

更多前端开发知识，请查阅 HTML中文网！！

设置html按钮点击事件无效果,css怎么设置按钮不能点击？相关推荐

li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
效果展示点击全选被全部勾选,再点击则取消勾选(下方还有取消按钮,实现同样功能). 也可以实现点击的书籍被勾选,再次点击则取消勾选在功能实现过程中主要是对v-show.v-if.v-else等的灵活 ...
彩虹6号计算机服务设置,彩虹六号围攻各选项效果解析与设置建议画面优化设置方法...
彩虹六号围攻的画面设置界面有很多选项,分别控制着不同的显示效果,不少玩家由于机器配置或是游玩体验不佳而不知道应该如何设置画面,于是小编就为大家带来了彩虹六号围攻画面设置完全指南,包含各选项效果解析与设 ...
html 怎么设置鼠标效果,css怎么设置鼠标形状
相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,下面是学习啦小编带来的关于css怎么设置鼠标形状的内容,欢迎阅读! css怎么设置鼠标 ...
vue点击事件，循环出来的关注列表，点击只关注其中一个并改变样式
vue点击事件, 循环出来的关注列表 ,点击只关注其中一个并改变样式这个适合大家参考,你们要是直接复制粘贴的话效果是出不来的,因为里面用了组件和api, <template><ul ...
Android TextView设置自动识别的超链接字体颜色，及自身点击事件无响应的解决办法
前言我们在给TextView设置超链接的时候,可能最简单的,Android已经给出了一个非常的简单的做法就是: 在xml中设置:  ...
小程序bindtap、catchtap、navigator点击事件无反应
2022大厂内推.百度.腾讯.集度汽车.包跟进度,有兴趣请联系FrancisBingo@163.com 网上比较普遍的说法是:app.json 的page 注册页面的顺序导致的. 还有一个很刁钻的原因 ...
DialogFragment中通过dataBinding绑定View，设置点击事件无效，通过getWindow设置dialog位置和大小无效。
1.问题描述:DialogFragment中通过dataBinding绑定View,设置点击事件无效. private val binding: CoreDialogEditContentBindin ...
Android ListView点击事件无反应
ListView焦点相关今天写了一个listview 适配之后设置了点击事件百思不得其解后来看到有篇文章说,可能是xml文件的style不对,不能是 <itemname="Andro ...
html循环自动点击事件,js循环遍历ul中li的点击事件，给给选中li添加css
功能:对于一个ul中固定的li个数,当点击其中一个li时,改变选中li的颜色:同时改变对应的另一个ul中li的颜色页面初始化的界面: HTML: 其他推荐: 10:21 10:22 10:25 10 ...

设置html按钮点击事件无效果,css怎么设置按钮不能点击？

设置html按钮点击事件无效果,css怎么设置按钮不能点击？相关推荐

最新文章

热门文章