如何使底下的元素不可點擊/停用？

我有兩個元素在彼此之上。當我點擊第一個div上的按鈕時，第二個div在第一個div的頂部打開，我想要做的是讓底部div非交互式（我不能點擊underlaying-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的任何其他方式可以解決這個問題？

來源

2011-09-16 kokomo

您可以設置/取消設置一個全局變量或'。數據（）'變量，並把所有的墊層-DIV的事件處理程序進行測試，他們執行了。你也可以'.unbind（）'這些處理程序永久刪除它們。 – Blazemonger

你可以使用解除綁定刪除Click事件處理程序是這樣的：

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

我擔心的是，如果這個作品與現場結合，但你至少應該嘗試一下:)

來源

2011-09-16 12:55:50 Matschie

不知道的你的最終產品，但是如果下層的div與上層的div重疊，而下層的div不再可見，那麼你可以只用display:block;下層的div。

來源

2011-09-16 13:05:16

爲什麼不使用jQuery .fadeIn()和.fadeOut()函數？您有兩個div，分別是id="div1"和id="div2"，並且您在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()})})

來源

2011-09-21 14:40:37 Nikolay

這是一個很古老的問題，但如果有人碰巧在它，你可能會發現它有用切換的指針事件CSS屬性你想禁用的對象。您不需要手動刪除點擊綁定或添加任何其他包裝。如果某個對象的指針事件設置爲「無」，則單擊時不會觸發事件。

在jQuery中：

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

來源

2017-07-29 04:21:46

如何使底下的元素不可點擊/停用？

回答

相關問題