Css 简明教程

CSS - pointer-event Property

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

Possible Values

  1. auto − ：这是默认值。它表示该元素以正常的方式进行，并根据指定的 CSS 属性和内容响应指针事件。在 SVG 内容中，该值和 visiblePainted 效果相同。

  2. none − 此值表示该元素不应响应指针事件。点击、悬停效果和其他交互将穿过该元素，就好像它不存在一样，而它下面的元素将接收这些事件。

  3. visiblePainted − 该值表示该元素不会接收指针事件，除非它们在该元素的可见绘制区域中触发。元素内的透明区域不响应指针事件。

  4. visibleFill − 与 visiblePainted 类似，此值表示该元素仅响应指针事件触发在可见的、绘制的区域或元素的填充触发，而忽略在透明区域的指针事件。

  5. visibleStroke − 与 visiblePainted 和 visibleFill 类似，此值表示该元素仅响应指针事件触发在可见的、绘制的区域或元素的描边触发，而忽略在透明区域的指针事件。

  6. visible − 仅当可见性被设定为 visible 时才成为指针事件的目标，而鼠标光标在其内部（填充）或周围（描边）时， fill 和 stroke 值对事件处理没有影响。

  7. painted − 该值表示该元素仅响应指针事件触发在其绘制内容上。元素内的透明区域不响应指针事件。

  8. fill − 与 painted 类似，此值表示该元素仅响应指针事件触发在其填充上，而忽略透明区域的事件。

  9. stroke − 与 painted 和 fill 类似，此值表示该元素仅响应指针事件触发在其描边上，而忽略透明区域的事件。

  10. all − 仅当指针在其内部（填充）或周围（描边）时，指针事件的目标。 fill 、 stroke 和 visibility 属性值不受影响。

Applies To

所有元素。

Syntax

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

Points To Remember

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

指针事件中的 "one 值不仅使该元素成为指针事件的目标，而且还允许事件传递 through ，以定位 underneath 该元素。

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

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

CSS pointer-event - none Value

以下示例演示了 pointer-event: 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-event - auto Value

以下示例演示 pointer-event: 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-event - Disabling Pointer Events on Images

以下示例演示 pointer-event: auto 属性如何禁用图像上指向事件（点击，悬停，等） −

<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>