Home > Article > Web Front-end > How to disable click events in css
How to disable click events in css
- 青灯夜游Original
- 2021-04-16 14:00:425571browse
In CSS, you can use the pointer-events attribute to prohibit click events. You only need to add the "pointer-events:none;" style to the element so that the element can never become the target of mouse events, thereby prohibiting mouse events. That’s it.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In css, you can use the pointer-events attribute to disable click events.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
a.disabled {
pointer-events: none;
cursor: default;
filter: alpha(opacity=50);
/*IE滤镜，透明度50%*/
-moz-opacity: 0.5;
/*Firefox私有，透明度50%*/
opacity: 0.5;
/*其他，透明度50%*/
}
</style>
</head>
<body><br/><br/>
<a href="#" class="disabled">不可点击的a链接</a><br/><br/>
<a href="#">正常的a链接</a>
</body>
</html>Rendering:
pointer-events:none What is it?
The pointer-events attribute specifies under what circumstances (if any) a specific graphic element can be the target of a mouse event.
pointer-events:none As the name implies, it means goodbye to mouse events. Elements are never the target of mouse events. The CSS attribute is applied to the element, and the links, clicks, etc. all become "Floating Cloud Brand Soy Sauce".
However, when the pointer-events attribute of its descendant elements specifies other values, the mouse event can point to the descendant element. In this case, the mouse event will trigger the event detection of the parent element during the capture or bubbling phase. hearing device.
(Learning video sharing: css video tutorial)
The above is the detailed content of How to disable click events in css. For more information, please follow other related articles on the PHP Chinese website!