CSS - pointer-event 属性

上一页
下一页

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

可能的值

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

适用于

所有元素。

语法


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

要记住的要点

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

指针事件中的“一个值”不仅使元素成为目标而不是指针事件，而且还允许事件通过，以元素下方的内容为目标。

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

带有指针事件的元素：没有一个元素仍将通过使用 Tab 键的顺序键盘导航获得焦点。

CSS pointer-event - none值

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


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

CSS pointer-event - auto 值

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


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

CSS 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>
打印本页
上一页
下一页