如何使底层元素不可点击/无效？

Question

我彼此之间有两个要素。 当我单击第一个div上的按钮时，第二个div在第一个div的顶部打开，我要做的是使基础div不互动（即我无法在基础div上单击任何内容（只要overlaying-div打开）。

JavaScript代码：

  $('#button').live('click', function()
  {    
      $('#underlaying-div).fadeTo("fast", 0.7);
      $('#overlaying-div).css('display', 'block');

      //Do something here to make the underlaying div unclickable
  });

  $("#overlaying-div").live("click", function() {
     $(this).hide();

     $('#underlaying-div).fadeTo("slow", 1.0);

     //Do something here to make the underlaying div clickable again
  });

CSS代码：

 #overlay-div
 {
    position:absolute;
    left:0;
    top:0;
    display:none;
    z-index: 20000;    
 }

我知道我可以使用event.preventDefault（）来确保如果单击underlaying-div中的某个元素，则不会发生任何事情，但是我希望当您将鼠标悬停在按钮上时，什么也不会发生（使用preventDefault（ ），悬停和其他内容仍然发生）。

CSS或javascript / JQuery中的其他任何方法都可以解决此问题？

Answer 1

不确定最终产品，但是如果底层div被覆盖重叠而导致底层div不再可见，则可以只display:block; 底层div

Answer 2

这是一个非常老的问题，但是如果有人碰到它，您可能会发现切换要禁用的对象的指针事件CSS属性很有用。 您无需手动删除单击绑定或添加任何其他包装。 如果对象的指针事件设置为“无”，则单击该对象时不会触发任何事件。

在jQuery中：

$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable

Answer 3

您可以使用unbind删除click事件处理程序，如下所示：

$(this).unbind('click'):

我担心的是，这是否可以用于实时绑定，但您至少应该尝试一下：)

Answer 4

为什么不使用jQuery .fadeIn()和.fadeOut()函数？ 您有两个具有id="div1"和id="div2" div，并且在div1具有id="button1"的按钮和在div2具有id="button2"的按钮。 CSS代码：

#div1 {
   //some CSS code without z-index
}

#div2 {
   //some CSS code without z-index
   visibility:hidden;
}

jQuery代码：

$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})