如何在元素可见时禁用外部点击？ [英] How to disable outside clicks while an element is visible?

问题描述

我有一个div，divDialog，它包含一个简单的对话框。它开始生活看不见，但在某一点我使其可见。该页面上有其他几个元素（菜单等），它们具有点击事件的事件侦听器。

我的问题是，一旦divDialog可见，我怎么能禁用除divDialog之外的所有点击事件？当然，一旦divDialog再次看不见，我想恢复所有听众的正常行为。

我读了这个优雅的答案，但它不会禁用外部点击，也不是跨平台的。

我有一个例程可以检测节点是否是另一个节点的祖先：

  function isAncestorOf（ancestor，descendant）{...} 
  

...可能是在解决方案中必要。但是我遇到了一些事件听众，冒泡，捕获和跨平台的行为（似乎不能为IE找到）麻烦。

我是没有在这个上使用jquery;

任何建议？

解决方案

你应该在窗口上放置一个透明的，固定的 div 。这样，屏幕上的任何点击都将是div，而不是其下的元素。这被普遍用作模态对话框的背景叠加。在IE中，您需要确保有一个！DOCTYPE声明为position：fixed to work。

  div＃overlay { 
位置：固定; 
顶部：0; 
 left：0; 
 height：100％; 
 width：100％; 
 z-index：100; 
 background-color：＃444444; 
不透明度：0.5; 
过滤器：alpha（opacity = 50）; 
} 
  

您需要确保divDialog的z-index大于覆盖层的。

I have a div, divDialog, that contains a simple dialog box. It begins life invisible, but at a certain point I make it visible. The page has several other elements on it (menus, etc.) that have event listeners for the click event.

My question is, once divDialog is visible, how can I disable all click events for everything except divDialog? Of course, once divDialog is invisible again, I'd like to restore all listeners to normal behavior.

I read this elegant answer, but it doesn't disable outside clicks, nor is it cross-platform.

I do have a routine that will detect whether a node is an ancestor of another:

function isAncestorOf(ancestor, descendant) {...}

...and that may be necessary in the solution. But I'm having trouble with event listeners, bubbling, capturing, and cross-platform behavior (can't seem to figure it out for IE).

I'm not using jquery on this one; just regular ol' javascript.

Any suggestions?

解决方案

You should place a transparent, fixed div over the window. That way any clicks on the screen will be that div and not elements underneath it. This is popularly used as the background overlay for a modal dialog. In IE, you'll need to make sure there's a !DOCTYPE declared for position:fixed to work.

div#overlay {
   position:fixed;
   top:0;
   left:0;
   height:100%;
   width:100%;
   z-index:100;
   background-color:#444444;
   opacity:0.5;
   filter:alpha(opacity=50);
}

And you'll need to make sure divDialog has a z-index greater than that of the overlay.

这篇关于如何在元素可见时禁用外部点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！