css如何控制按钮不可用

这篇文章主要介绍了css如何控制按钮不可用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

方法:给按钮元素添加“pointer-events:没有,”样式来让按钮元素永远不会成为鼠标事件的目标,让其点击事件失效,即可控制按钮不可用。

在HTML中我们可以直接通过HTML的残疾或只读的属性实现按钮不可点击;而在css中,可以使用pointer-events属性实现点击事件失效。

我们可以为按钮添加“pointer-events:没有”两种css样式实现按钮不可点击。

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

示例:css让按钮不可用

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=皍tf-8"祝辞 　　& lt; style> 　　button  { 　　透明度:0.5;/*设置蒙版效果*/pointer-events:没有;/*禁止鼠标事件*/} 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; button> & lt;/button> 　　& lt;/body> 　　 　　& lt;/html>

说明:

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

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

感谢你能够认真阅读完这篇文章,希望小编分享的“css如何控制按钮不可用”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

css如何控制按钮不可用