移动端 html 关闭遮罩层时,禁止遮罩层下面层的控件获取焦点

在移动端开发中，当你想要在关闭遮罩层时阻止底部控件获得焦点，可以通过设置遮罩层的 touchAction 属性为 none 来禁止触摸事件，或者在遮罩层上添加一个透明的事件拦截层。

以下是一个示例代码，展示了如何在关闭遮罩层时阻止底部控件获得焦点：

HTML:

<div id="overlay" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5);">
  <!-- 遮罩层内容 -->
</div>
 
<button id="open-btn">打开遮罩层</button>
<button id="close-btn">关闭遮罩层</button>

CSS：

#overlay {
  touch-action: none; /* 禁止触摸事件 */
}

JavaScript:

document.getElementById('open-btn').addEventListener('click', function() {
  document.getElementById('overlay').style.display = 'block';
});
 
document.getElementById('close-btn').addEventListener('click', function() {
  document.getElementById('overlay').style.display = 'none';
});

在这个例子中，当遮罩层显示时，通过设置 touch-action: none 属性，禁止了底部控件的所有触摸行为。当你点击关闭遮罩层的按钮时，遮罩层会被隐藏，此时底部控件可以正常接收到焦点事件。