CSS - pointer-events 属性

CSS pointer-events 属性用于控制元素如何响应指针事件，例如鼠标点击、鼠标悬停和鼠标移动。它允许您指定元素是否应接收指针事件以及这些事件是否应触发诸如点击或悬停之类的操作。

可能的值

auto −：这是默认值。它表示元素按正常方式运行，并根据其指定的 CSS 属性和内容响应指针事件。在 SVG 内容中，此值和 visiblePainted 效果相同。
none − 此值表示元素不应响应指针事件。点击、悬停效果和其他交互将穿过元素，就好像它不存在一样，下方的元素将接收这些事件。
visiblePainted − 此值表示元素除非在元素的可见已绘制区域上触发，否则不会接收指针事件。元素内的透明区域不响应指针事件。
visibleFill − 与 visiblePainted 类似，此值表示元素仅响应在其可见已绘制区域或元素填充上触发的指针事件，忽略透明区域上的指针事件。
visibleStroke − 与 visiblePainted 和 visibleFill 类似，此值表示元素仅响应在其可见已绘制区域或元素描边上触发的指针事件，忽略透明区域上的指针事件。
visible − 仅当可见性设置为 visible 时才定位指针事件，并且鼠标光标在其内部（填充）或周长（描边）上，fill 和 stroke 值不影响事件处理。
painted − 此值表示元素仅响应在其已绘制内容上触发的指针事件。元素内的透明区域不响应指针事件。
fill − 与 painted 类似，此值表示元素仅响应在其填充上触发的指针事件，忽略透明区域上的事件。
stroke − 与 painted 和 fill 类似，此值表示元素仅响应在其描边上触发的指针事件，忽略透明区域上的事件。
all − 当指针在其内部（填充）或周长（描边）上时，目标指向指针事件。fill、stroke 和 visibility 属性值不受影响。

应用于

所有元素。

语法

pointer-event: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all;

要点

如果未定义此属性，则 SVG 内容具有与 visiblePainted 值相同的属性。

指针事件中的 none 值不仅使元素成为指针事件的目标，而不是指针事件，而且还允许事件穿过，从而定位元素下方的内容。

使用 pointer-events: none 禁用元素上的指针事件并不意味着不会触发事件监听器。如果该元素的子元素启用了 pointer-events 以允许其成为事件目标，则针对子元素的事件将通过父元素传递，可能会触发事件监听器。但是，如果指针活动仅发生在父元素覆盖的区域中，则子元素和父元素都将错过它。

具有 pointer-events: none 的元素仍可以通过 Tab 键的顺序键盘导航获得焦点。

CSS pointer-events - none 值

以下示例演示了 pointer-events: none 属性如何禁用超链接的点击 −

<html>
<head>
<style> 
   a[href="https://tutorialspoint_css_pointer-event.com"] {
      pointer-events: none;
   }
</style>
</head>
<body>
   <a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a>
</body>
</html>

CSS pointer-events - auto 值

以下示例演示了 pointer-events: auto 属性如何允许点击锚元素 −

<html>
<head>
<style> 
   a[href="https://tutorialspoint_css_pointer-event.com"] {
      pointer-events: auto;
   }
</style>
</head>
<body>
   <a href="https://tutorialspoint_css_pointer-event.com">css_pointer-event</a>
</body>
</html>

CSS pointer-events - 禁用图像上的指针事件

以下示例演示了 pointer-events: none 属性如何禁用图像上的指针事件（点击、悬停等）−

<html>
<head>
<style>
   img {
      height: 100px; 
      width: 100px;
      pointer-events: none;
   }
</style>
</head>
<body>
   <img src="images/pink-flower.jpg" alt="pink-flower">
</body>
</html>

打印页面