如何使用CSS使区域无法点击

在本文中，要使给定区域无法点击，我们将使用CSS属性pointer-events，将其赋值为none，以使所需区域无法点击。

指针事件是一种处理多种输入设备（如鼠标，笔/触控笔，触摸屏等）输入的现代方式。

pointer-events CSS属性设置了特定图形组件何时（如果有）成为指针事件的目标。这个属性用于指定组件是否显示指针事件，以及是否出现在指针上。

语法

在CSS中，我们使用以下pointer-event语法，作为CSS属性的一种用法−

pointer-events: auto;
pointer-events: none;

参数

Auto − 元素的行为与未指定pointer-events属性时的行为相同。在SVG内容中，此值和visiblePainted值具有相同的效果。
None − 元素永远不是指针事件的目标；但是，如果这些子元素的指针事件设置为其他值，指针事件可能会针对其后代元素。在这种情况下，指针事件将在事件捕获/冒泡阶段适当地触发此父元素上的事件监听器，从而在事件捕获/冒泡阶段在目标元素和后代元素之间传递。

注意 - 默认情况下，pointer-event的设置值为“auto”。

我们提供了以下解决方案 –

通过使用pointer-events属性。

让我们逐一查看程序及其输出。

方法：通过CSS的pointer-events属性

在这种方法中，我们将使给定的图像不可点击，给定图像覆盖的整个区域将使用指针事件CSS属性使其不可点击，同时使用href属性，我们使用pointer-events CSS属性设置页面中的元素是否要响应点击或不响应点击，以及类中的href，使图像不可点击在<a>标签内。对于图像，我们使用<img>标签和带有href属性的<a>标签。<img>标签用于在网页中使用图像，而<a>标签用于添加链接。将图像的URL添加到图像标签的src属性中。除此之外，添加高度和宽度。

特定视觉元素是否能成为指针事件目标由pointer-events CSS属性控制，该属性指定它们是否可以。

此方法中使用了内联CSS方法，因为指针事件是一种通用的CSS属性，可以同样适用于任何CSS方法，因此在此方法下使用了内联CSS。

注意 - 在非SVG元素中使用CSS中的pointer-events是实验性的。该功能曾是CSS 3 UI草案规范的一部分，但由于存在许多未解决的问题，已经推迟到CSS 4。

语法

以下是pointer-events CSS属性的通用语法，在参数中根据必要的属性进行设置。

Pointer-events: none;

示例1

在下面的程序中，我们使用了内部CSS，通过在其中添加style标签，我们创建了一个类，该类具有指向事件为none的属性。为了使圆圈覆盖的区域无法被点击，我们使其具有一个简单的圆形。同时，我们使用HTML编程语言为<a>标签添加了一个链接到其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.tutorialspoint.com/">
         <img alt="Qries" src="https://www.tutorialspoint.com/cg/images/logo.png"
         width=300" height="100">
      </a>
   </body>
</html>

支持的浏览器 - pointer-events属性支持的浏览器如下：