如何使用 CSS 使某个区域不可点击?
在本文中，为了使给定区域不可点击，我们将使用 CSS 属性 pointer-events，将其赋值为 none 值，以使所需区域不可点击。
指针事件是一种处理来自各种信息设备(例如鼠标、手写笔、触摸屏等)输入的现代方法。
pointer-events CSS 属性设置特定图形组件在什么情况下(如果有)将成为指针事件的目标。此属性用于指定组件是否显示指针事件以及是否在指针上显示。
语法
在 CSS 中，我们使用 CSS 属性 pointer-event 的以下语法 -
pointer-events: auto; pointer-events: none;
参数
Auto − 元素的行为与未指定 pointer-events 属性时的行为相同。在 SVG 内容中，此值与 visiblePainted 值具有相同的效果。
None − 该元素永远不会成为指针事件的目标;但是，如果其后代元素的 pointer-events 属性设置为其他值，则指针事件可能会以这些后代元素为目标。在这种情况下，在事件捕获/冒泡阶段，指针事件将在往返于子元素的过程中，根据需要触发此父元素上的事件监听器。
注意 − 默认情况下，pointer-event 的设置值为"auto"。
我们提供了以下方法的解决方案:
- 通过使用 pointer-events 属性。
让我们逐一查看程序及其输出。
方法:通过使用 CSS 的 pointer-events 属性
在此方法中，我们将使用 CSS 属性 pointer-event 和 href 属性使给定图像不可点击，给定图像覆盖的整个区域将不可点击。我们使用 pointer-events CSS 属性来设置页面中的元素在点击元素时是否必须响应，并使用类中的 href 来使图像不可点击。在 <a> 标签内不可点击。对于图像，我们使用 <img> 标签以及带有 href 属性的 <a> 标签。<img> 标签用于在网页中使用图像，<a> 标签用于添加链接。将图像的 URL 添加到图像标签的 src 属性中。此外，还要添加高度和宽度。
特定视觉元素是否能够成为指针事件的目标由 pointer-events CSS 属性控制，该属性指定它们是否可以成为指针事件的目标。
由于指针事件是一种 CSS 的遗传属性，因此在此方法下使用了内联 CSS 方法，因为它是一种 CSS 的遗传属性，因此可以同样有效地应用于任何 CSS 方法。
注意 − 在 CSS 中对非 SVG 元素使用 pointer-events 仍处于实验阶段。该功能曾是 CSS 3 UI 草案规范的一部分，但由于许多未解决的问题，已推迟到 CSS 4。
语法
以下是 pointer-events CSS 属性的通用语法，其中的参数对应相应的属性。
Pointer-events: none;
示例 1
在下面的程序中，我们通过添加 style 标签使用了内部 CSS。我们创建了一个将 pointer-event 设置为 none 的类，并赋予其简单圆圈的属性，使圆圈覆盖的区域与 <a> 标签一起不可点击，并在 HTML 编程语言中为其 href 属性添加了一个链接。
<!DOCTYPE html>
<html
<head>
<meta charset="utf-8">
<title>Disable a href Link using CSS</title>
</head>
<style>
.unclickable{
pointer-events: none;
height: 250px;
width: 250px;
background-color: blue;
border-radius: 50%;
display: inline-block;
}
</style>
<body>
<h3>The below area covered by the circle is unclickable:-</h3>
<a class="unclickable" href="tutorialspoint.html"></a>
</body>
</html>
示例 2
在下面的程序中，我们使用了内联 CSS，即在 <a> 标签中添加 style 属性，并在其中添加 pointer-event 为 none，这将使使用的图像在 HTML 编程语言中对任何用户都无法点击。
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
The following image is unclickable as a link:<br>
<a style=" pointer-events: none; "href="https://www.cainiaomax.com/">
<img alt="Qries" src="https://www.cainiaomax.com/cg/images/logo.png"
width=300" height="100">
</a>
</body>
</html>
支持的浏览器 − pointer-events 属性支持的浏览器列表如下 −
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
本文重点介绍如何使用 CSS 规范中的 pointer-events 属性，用 CSS 创建不可点击的区域。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
