在按钮上遮罩一层div并阻止按钮被触发 用css能否实现

可以通过在按钮外层包装一个遮罩层（`div` 元素），并设置其 `z-index` 属性为较高的值，来实现遮罩按钮的效果。同时，为遮罩层添加 `pointer-events: none` 样式，可以让鼠标事件穿透遮罩层，从而直接触发按钮。

以下是一个示例代码：

<button class="button">点击按钮</button>
<div class="mask"></div>

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none; /* 让鼠标事件穿透遮罩层 */
}

.button {
  position: relative;
  z-index: 20; /* 按钮的 z-index 属性值要比遮罩层高 */
}

通过上述代码，我们在按钮上方添加了一个全屏的遮罩层，并设置其 `pointer-events: none` 样式，使鼠标事件穿透遮罩层，直接触发按钮。这样，当需要禁用按钮的时候，我们只需要动态控制遮罩层是否显示即可。

相关问题

pointer-events: none 只能阻止鼠标事件 那么又如何阻止键盘enter触发呢 用css能否实现

`pointer-events: none` 确实只能阻止鼠标事件，不能阻止键盘事件。如果需要阻止键盘事件，可以通过 JavaScript 来实现。

以下是一个示例代码，用于在按钮上添加遮罩层，并阻止其触发键盘事件：

<button class="button" id="myButton">点击按钮</button>
<div class="mask" id="myMask"></div>

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.button {
  position: relative;
  z-index: 20;
}

var button = document.getElementById("myButton");
var mask = document.getElementById("myMask");

mask.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) { // 阻止 enter 键事件
    event.preventDefault();
  }
});

mask.addEventListener("click", function(event) {
  event.preventDefault();
  event.stopPropagation();
});

button.addEventListener("click", function(event) {
  mask.style.display = "block";
  mask.setAttribute("tabindex", -1);
  mask.focus();
});

mask.addEventListener("blur", function(event) {
  mask.style.display = "none";
});

通过上述代码，我们在按钮上方添加了一个全屏的遮罩层，并通过 JavaScript 来阻止其触发键盘事件。同时，我们在遮罩层上监听 `click` 事件，通过 `event.preventDefault()` 和 `event.stopPropagation()` 方法来阻止触发按钮的点击事件。这样，当需要禁用按钮的时候，我们只需要动态控制遮罩层是否显示即可。