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

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

744c673cf0d8f93b46f2400b47926fd4.png

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

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

语法:pointer-events:auto| none | visiblepainted | visiblefill | visiblestroke |

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中文网 !!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/540821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机图形学与几何造型导论_计算机图形学导论

计算机图形学与几何造型导论历史 (History) The main forerunner sciences to the development of modern computer graphics were the advances in electrical engineering, electronics, and television that took place during the first half of the twentieth century whe…

android scrollview焦点,scrollview里面的edittext,当它获得焦点时如何滚动到edittext

在scrollview中有一个edittext。 (并且edittext上方的scrollview中还有其他视图。)当用户按下edittext时,键盘变得可见,并且scrollview的可见区域变得很小。因为edittext没有显示在屏幕上。 (它不会滚动滚动视图,以便显示编辑文本。)在用户按…

Linux中解压rar文件

Linux平台默认是不支持RAR文件的解压,需要安装linux版本的RAR压缩软件,下载地址为:http://www.rarlab.com/download.htm 下载之后进行解压之后,进入rar目录,运行make指令进行安装: [rootlocalhost rar]# ls…

kotlin 查找id_Kotlin程序查找立方体区域

kotlin 查找idA cube has 6 square faces, if edges length is side. Then the area of each square is side2, thus, the area of cube will be 6*sise2. 如果边的长度为side ,则一个立方体有6个正方形的面。 那么每个正方形的面积是边2 ,因此&#xff…

Python自动化运维之高级函数

一、协程1.1协程的概念协程,又称微线程,纤程。英文名Coroutine。一句话说明什么是线程:协程是一种用户态的轻量级线程。(其实并没有说明白~)那么这么来理解协程比较容易:   线程是系统级别的,…

android 继承listview,Android listView 继承ListActivity的用法

Android listView 继承ListActivity的用法 在手机中经常有列表方式。如果Activity中只有唯⼀⼀个List(这也是通常的情况),可以继承ListActivity来实现。我们用两个例子来学习List。List例子⼀:利用Android自带的List格式步骤⼀:Android XML文…

计算机图形学的应用

Some of the applications of computer graphics are, 计算机图形学的一些应用是 Education and Training 教育和培训 Use in Biology 用于生物学 Computer-Generated Maps 计算机生成的地图 Architect 建筑师 Presentation Graphics 演示图形 Computer Art 电脑美术 Entertai…

html页面授权码,spring boot 2.0 整合 oauth2 authorization code授权码模式

oauth2 authorization code 大致流程用户打开客户端后,客户端要求用户给予授权。用户同意给予客户端授权。客户端使用授权得到的code,向认证服务器申请token令牌。认证服务器对客户端进行认证以后,确认无误,同意发放令牌。客户端请…

Net设计模式实例之代理模式(Proxy Pattern)

一、代理模式简介(Brief Introduction) 代理模式(Proxy Pattern)对其他对象提供一种代理以控制对这个对象的访问。 二、解决的问题(What To Solve) 1、远程代理 远程代理,也就是为了一个对象…

c语言存储类_C编程语言的存储类

c语言存储类A variables storage class tells us the following, 变量的存储类告诉我们以下内容: Where the variables would be stored? 变量将存储在哪里? What will be the initial of the variable, if the initial value is not specifically ass…

jsonp请求html页面,JavaScript中的JSON和JSONP

简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议。众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将json数据封装进js格式的…

2017软件工程实践

课程信息 软件工程实践 参考教材 《构建之法》 作者:邹欣, 编辑:周筠 他山之石 北京航空航天大学 罗杰, 刘乾 东北师范大学 杨贵福 北京电子科技学院 娄嘉鹏 教师:汪璟玢 助教:卞…

suse leap_Ruby程序检查leap年

suse leapProblem statement: Given a year, we have to check whether it is a Leap year or not using Ruby program. 问题陈述 :给定年份,我们必须使用Ruby程序检查是否为Le年。 Methods used: 使用的方法: gets(): This method is a pu…

html导航栏点击不能跳转,无法单击导航栏中的链接CSS HTML

不确定是否允许您链接您的网站,但是如果允许。 因此,我可以将所有链接悬停在导航栏中,但我无法点击它们,并且S的图片是可移动的,但无法点击,我做错了什么?无法单击导航栏中的链接CSS HTMLNickeb…

JAVA 取得当前目录的路径/Servlet/class/文件路径/web路径/url地址

2019独角兽企业重金招聘Python工程师标准>>> 在写Java程序时不可避免要获取文件的路径...总结一下,遗漏的随时补上 1.可以在servlet的init方法里 String path getServletContext().getRealPath("/"); 这将获取web项目的全路径 例如 :E:\eclipseM9\worksp…

关于细分到字段的权限系统_操作系统中的细分

关于细分到字段的权限系统为什么需要细分? (Why Segmentation is required?) In the Operating System, an important drawback of memory management is the separation of the users view of memory and the actual physical memory. Paging is the scheme which…

计算机科学技术专业解析,专业解读—计算机科学与技术

原标题:专业解读—计算机科学与技术专业培养目标:本专业培养具有良好的科学素养,系统地、较好地掌握计算机科学与技术包括计算机硬件、软件与应用的基本理论、基本知识和基本技能与方法,能在科研部门、教育单位、企业、事业、技术…

阿里云服务器配置开发环境第五章:Centos7.3切换为iptables防火墙

centos7.3默认使用的防火墙应该是firewall,而不是iptables。而我们xxmj服务器使用的是iptables防火墙。所以,在配置防火墙之前,我们需要先关闭firewall,安装iptables。 1.关闭firewall service firewalld stop systemctl disable …

mba学什么书_MBA的完整形式是什么?

mba学什么书MBA:工商管理硕士 (MBA: Master of Business Administration) MBA is an abbreviation of a Master of Business Administration. It is a masters degree for post-graduation in business administration. This business masters degree program is a …

Qt for Android 开发大坑

Qt for Android 开发大坑 作者: qyvlik Qt 5.5.1 这里说一说比較常见的 Qt 开发安卓的大坑。希望同学们不要做无谓的挣扎,跳过这些坑。输入框 首当其冲的是输入框,Qt 的输入在安卓上表现不佳. 无法支持安卓原生的输入法訪问 Qt 的输入框。就是安卓输入法…