Home > Article > Web Front-end > How to control button unavailability with css
How to control button unavailability with css
- 青灯夜游Original
- 2021-01-19 15:46:046474browse
Method: Add the "pointer-events:none;" style to the button element so that the button element will never become the target of mouse events, invalidate its click event, and control the button to be unavailable.
The operating environment of this tutorial: windows7 system, css3&&html5 version, Dell G3 computer.
(Learning video sharing: css video tutorial)
In HTML, we can directly use the disabled or readonly attributes of HTML to make the button unclickable; while in css, You can use the pointer-events attribute to invalidate click events.
We can add "pointer-events:none" two css styles to the button to make the button unclickable.
The pointer-events attribute In addition to indicating that the element is not the target of a mouse event, a value of none indicates that the mouse event "penetrates" the element and specifies anything "below" the element. Invalidate the click event on the button.
Example: CSS makes the button unavailable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button {
opacity: 0.5;
/*设置蒙版效果*/
pointer-events: none;
/*禁止鼠标事件*/
}
</style>
</head>
<body>
<button>php中文网</button>
</body>
</html>Description:
Elements with pointer-events:none style set will never be the target of mouse events. However, mouse events can be directed to descendant elements when their pointer-events attribute specifies a different value, in which case the mouse event will trigger the parent element's event listener during the capture or bubbling phase.
Using pointer-events to prevent an element from being the target of mouse events does not necessarily mean that the event listener on the element will never fire. If an element descendant explicitly specifies the pointer-events attribute and allows it to be the target of mouse events, then any events pointed to that element will propagate through the parent element during event propagation and trigger the event listeners on it in the appropriate manner. . Of course, mouse activity on the screen that is on the parent element but not on the descendant element will not be captured by the parent element and descendant elements (will pass through the parent element and point to the element located below it).
For more programming-related knowledge, please visit: Introduction to Programming! !
The above is the detailed content of How to control button unavailability with css. For more information, please follow other related articles on the PHP Chinese website!