2012-10-19 78 views
0

可能重複:
Handling click events on z-index’d layers禁用DIV與jQuery =點擊量之下

我打了幾次找到StackOverflow的答案對於這一點,但我嘗試了所有的代碼,並似乎沒有上班。

我有一個div與透明度重疊,我需要點擊下面的div。我如何禁用上面的div,但仍然保持在屏幕上?

我正在使用Firefox。

感謝 -Ed

下面是div的HTML

<div class="EduardoWhite"><img src="images/EduardoWhite.png" width="614" height="539" /> 

累這些和縹緲:

<script> 
$(document).ready(function() 
    { 

    $(".EduardoWhite").attr({ disabled: 'disabled' }); 


    $('.EduardoWhite').click(function(event) 
    { 
     $('.EduardoWhite').hide(); 



    }); 

    }); 

</script> 
+0

在這裏發佈html代碼,至少我沒有正確理解這個問題。 –

+0

「禁用div」是什麼意思? – jtfairbank

+1

我假設頂部的'div'不需要底層'div'的孩子。所以即使傳播可能不起作用。我可能會認爲你可以找到點擊的XY座標並使用它 - 我個人會憎惡使用它作爲解決方案! –

回答

2

這取決於你的目標瀏覽器,但如果IE ISN」一個問題,你可以使用指針事件。

喜歡的東西:

#overlapping-div { pointer-events: none } 

編輯 - 這裏有一個的jsfiddle:http://jsfiddle.net/Eg4wz/

該元素的任何點擊都將被忽略,讓下面的元素接收事件。

MDN reference

Can I Use reference

+0

+1可能因爲缺乏IE支持而無用,但很有趣。 –

+0

這聽起來很有趣。 @Papa De Beau - 請讓我們知道這是否適合你... –

+2

@dystroy - 我個人會給所有IE用戶發送一條消息,告訴他們使用受IE瀏覽器和故障網站影響的備用瀏覽器。 IE未使用時,我的大學和.gov網站中有很多頁面出現故障。 –

1

沒有爲「禁用」,如果它具有較高的z-index比它下面的股利股利沒有標準的方式 - 點擊事件將在最高的DIV總是發生。

您唯一的選擇是移動div,使其不可見,或捕獲點擊事件,然後選擇性地觸發下面的div上的事件。 pointer-events CSS屬性可能會有所幫助,但不受所有瀏覽器支持。

+1

要繼續響應,並考慮第一個DIV「正常」,您可以將浮動DIV(絕對位置)放入「正常」位置(「正常」DIV可以具有位置相對於位置引用的位置)。通過這樣做,浮動DIV上的單擊事件將會冒泡,然後到達「正常」DIV容器。 – MatRt