CSS pointer-event - 易学教程，面试笔记经验！

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

属性值

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

适用范围

所有元素。

语法

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

要记住的要点

当未定义此属性时，SVG 内容与visiblePainted 值具有相同的属性。

"指针事件中的一个值不仅使元素的目标而不是指针事件，但它也允许事件通过，目标是元素下面的内容。

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

具有指针事件的元素:仍然不会通过使用 Tab 键的顺序键盘导航获得焦点。

CSS pointer-event: none

以下示例演示了pointer-event:none属性如何禁用超链接被单击 -

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

CSS pointer-event: auto

以下示例演示了pointer-event:auto 属性允许锚元素可单击 -

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

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

以下示例演示了pointer-event:auto 属性禁用图像上的指针事件（单击、悬停等） -

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