javascript - 防止与 HTML 内容交互

Question

我有一个站点菜单，它位于覆盖层下方，通过单击覆盖层上的按钮将其滑到一边来显示。

我想要做的是，当站点菜单打开时，防止与覆盖（理想情况下，除了菜单按钮之外的所有内容）进行交互。

我可以通过隐藏和显示一个位于所有覆盖内容之上的容器来做到这一点，但我想知道是否有办法使用 CSS（最佳选项）或 javascript 设置某种属性来禁用点击/触摸事件上覆。有任何想法吗？

score 0 · Accepted Answer

您可以使用 JQuery 模态覆盖来禁止用户使用除模态 div 中的任何内容之外的任何其他内容。

score 0 · Accepted Answer

CSS 是关于外观，而不是行为。所以你不能通过对元素应用 CSS 来启用或禁用元素。

您的覆盖解决方案非常有能力，我也会这样做。请注意，您的叠加层可以是透明或半透明的。

onclick可以通过使用 Javascript 覆盖 click 事件来解决，但是如果您已经有一个简短的问题，为什么还要创建一个复杂的解决方案（您必须重新定义每个元素上的事件，然后以某种方式将其恢复正常）清洁解决方案？

正如mbsurfer已经建议的那样，禁用除菜单之外的所有内容的快速方法是使用.dialog带有以下modal选项的 jQuery UI：

$(function() {
  $( "#menu" ).dialog({
    modal: true
  });
});

文档中的更多信息：http: //api.jqueryui.com/dialog/

score 0 · Accepted Answer

当菜单打开时，将此属性添加到您要禁用的任何控件

onclick="return false;"

然后在菜单关闭时删除该属性。这将防止发生默认操作。

您可以使用以下代码在不添加属性的情况下执行此操作：

document.getElementById("myElement").onclick = function() { return false; }

3 回答 3