CSS 可以通过禁止按钮点击事件失效实现按钮不可点击. 在 CSS 中, 可以使用 pointer-events 属性实现点击事件失效. 下面我们来看一下 CSS 设置按钮不可点击的方法.
pointer-events 属性除了指示该元素不是鼠标事件的目标之外, 值 none 表示鼠标事件 "穿透" 该元素并且指定该元素 "下面" 的任何东西. 实现按钮上的点击事件失效.
示例: CSS 让按钮不可用
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- button { opacity: 0.5; /* 设置蒙版效果 */ pointer-events: none; /* 禁止鼠标事件 */
- }
- </style>
- </head>
- <body>
- <button>
- HTML 中文网
- </button>
- </body>
- </HTML>
说明:
设置 pointer-events:none 样式的元素永远不会成为鼠标事件的 target. 但是, 当其后代元素的 pointer-events 属性指定其他值时, 鼠标事件可以指向后代元素, 在这种情况下, 鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器.
使用 pointer-events 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发. 如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标, 那么指向该元素的任何事件在事件传播过程中都将通过父元素, 并以适当的方式触发其上的事件侦听器. 当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获 (将会穿过父元素而指向位于其下面的元素).
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/15988.html