css:如何让页面禁止和用户产生交互

时间:2024-03-07 16:02:38

实用场景:当一个页面只需要用户查看相关信息,但不需要用户修改信息时,除了组件禁用还可以使用该模式

方法:在需要的选择器里面输入pointer-events:none即可,

body {
  pointer-events: none;
}

上述代码会将页面中的所有元素的pointer-events属性设置为none,从而禁止用户与所有元素进行交互。需要注意的是,这样会将页面上的所有元素都禁用,包括按钮、链接等,用户将无法进行点击、输入等操作。

如果只希望对某个特定元素禁止用户交互,可以通过选择器选中该元素,并将其pointer-events属性设置为none,示例代码如下:

因为最近太忙了!!!!所以很多比较难得有价值的博客没有时间写,但是还是会保持跟新一些实际开发中好用的知识点。

.element-class {
  pointer-events: none;
}