Css 简明教程

CSS - pointer-event Property

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

CSS pointer-event property is used to control how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements. It allows you to specify whether an element should receive pointer events and whether those events should trigger actions like clicking or hovering.

Possible Values

auto − : This is the default value. It indicates that the element behaves as normal and responds to pointer events based on its specified CSS properties and content. In SVG content, this value and visiblePainted have the same effect.
none − This value indicates that the element should not respond to pointer events. Clicks, hover effects, and other interactions will pass through the element as if it were not there, and the elements beneath it will receive those events instead.
visiblePainted − This value indicates that the element does not receive pointer events unless they are triggered on a visible, painted area of the element. Transparent areas within the element do not respond to pointer events..
visibleFill − Similar to visiblePainted, this value indicates that the element only responds to pointer events triggered on visible, painted areas or the fill of the element, ignoring pointer events on transparent areas.
visibleStroke − Similar to visiblePainted and visibleFill, this value indicates that the element only responds to pointer events triggered on visible, painted areas or the stroke of the element, ignoring pointer events on transparent areas.
visible − Targets pointer events only when the visibility is set to visible. and the mouse cursor is over its interior (fill) or perimeter (stroke), with the fill and stroke values not affecting event processing
painted − This value indicates that the element only responds to pointer events triggered on its painted content. Transparent areas within the element do not respond to pointer events.
fill − Similar to painted, this value indicates that the element only responds to pointer events triggered on its fill, ignoring events on transparent areas.
stroke − Similar to painted and fill, this value indicates that the element only responds to pointer events triggered on its stroke, ignoring events on transparent areas.
all − Targets to pointer events when the pointer is over their interior (fill) or perimeter (stroke). The fill, stroke and visibility properties values are unaffected.

Applies To

所有元素。

All elements.

Syntax

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

Points To Remember

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

When this property is not defined, SVG content has the same properties as the visiblePainted value.

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

The "one value in pointer events not only makes the element the target rather than the pointer event, but it also allows the event to pass through, targeting what is underneath the element.

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

Disabling pointer events on an element using pointer-events does not mean that event listeners will not be triggered. If a child of that element has pointer-events enabled to allow it to be the event target, events aimed at the child will pass via the parent, potentially triggering event listeners. However, if the pointer activity occurs in an area only covered by the parent, it will be missed by both the child and the parent.

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

Elements with pointer-events: none will still get focus via sequential keyboard navigation with the Tab key.

CSS pointer-event - none Value

以下示例演示了 pointer-event: none 属性如何禁用自动连接点击 −

The following example demonstrates how the pointer-event: none property disables the hyperlink from being clicked −

<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 属性允许点击锚元素 −

The following example demonstrates the pointer-event: auto property allows the anchor element to be clickable −

<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 属性如何禁用图像上指向事件（点击，悬停，等） −

The following example demonstrates the pointer-event: auto property disables pointer events (clicking, hovering, etc.) on an images −

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