关闭画布菜单时禁用页面交互(如链接、输入)？

Question

我有一份画布菜单。打开菜单时，仍然可以看到少量的普通页面内容。单击或点击此区域时，菜单将关闭。

当正常的内容是文本和图像时，这是有效的。但是，当它是一个链接时，这个链接就会被跟随，如果它是一个输入，那么输入就会变成活动的。

当菜单打开时，我如何禁用链接、输入等？我可以用JavaScript (我在使用jQuery)来完成这个任务吗？

JavaScript非常简单。当您单击或点击菜单，然后用CSS动画页面时，我只需切换一个类。

  $('.off-canvas-menu-trigger').click(function() {
    $('body').toggleClass('off-canvas-menu-is-open');
  });

  $('.page-content').click(function() {
    $('body').removeClass('off-canvas-menu-is-open');
  });

Answer 1

它不是JavaScript，但最好的解决方案是使用CSS禁用整个div及其内容，使其不能单击：

pointer-events: none