CSS怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
想要按钮不能点击可以通过设置按钮点击事件失效来实现;而在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。
示例:
<html> <head> <style> a{pointer-events: none;} </style> </head> <body> <button ><a href="https://www.html.cn/">HTML中文网</a></button> </body> </html>