滑块菜单使外部元素不可点击

Question

假设我有此滑块菜单：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

https://codepen.io/alifarah/pen/VwwGypa

当滑块处于活动状态/退出状态时，如何防止onclick事件（防止发生单击）？

Answer 1

实现此目的最简单的方法是添加一个全高，全角div，该div会阻止除滑动菜单之外的所有内容，以防止用户与页面的其余部分进行交互。

div#clickBlock {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
}

您可以在openNav点击处理程序中添加它，然后在closeNav内将其删除。

updated codepen