如何隱藏一個元素而不佔用空間並仍然對事件做出響應？

display:none使元素遠離佈局流程，因此不佔用頁面上的空間，但其事件被禁用。如何隱藏一個元素而不佔用空間並仍然對事件做出響應？

visibility:hidden隱藏元素，但元素仍佔用空間。

我需要一種方法來隱藏文件輸入元素而不佔用空間，並在我調用它的.click()事件時做出響應。

Example

來源

2011-12-22 tamakisquare

只需將不透明度設置爲0即可。該元素不會顯示，也不會佔用空間。其活動將起作用。

給出不透明度時，還要指定所有瀏覽器（-moz ..，-webkit，filter：..）等的不透明度對應物，以確保跨瀏覽器的兼容性。

編輯

你的風格應該是這個樣子：

.mydiv { 
    position: absolute; 
    left: 10px; /* change as needed */ 
    top: 10px; /* change as needed */ 
    opacity: 0; 
}

工作演示在這裏：http://jsfiddle.net/t2BHg/6/

來源

2011-12-22 10:25:15 techfoobar

我認爲這就是這些人正在做的事情。設置不透明度爲0. http://blueimp.github.com/jQuery-File-Upload/ – techfoobar 2011-12-22 10:32:16

我試過這個，但沒有奏效。雖然隱藏起來，但仍佔用空間。你可以看到[我的例子]（http://jsfiddle.net/ahmoo/t2BHg/1/） – tamakisquare 2011-12-22 18:01:59

我忘了提，你需要給位置：絕對！對於那個很抱歉。 :)我已經更新了我的答案。 – techfoobar 2011-12-22 18:28:35

你可以把它的可見性：隱藏，並設置寬度和高度爲0

來源

2011-12-22 01:48:24 khael

沒有一個完美的解決方案，因爲它仍然佔據一個小空間（[見這裏]（http：// j sfiddle.net/ahmoo/nGAee/1/））。我會給它更多的時間來看看是否有更好的答案。否則，我會去解決你的問題。謝謝。 – tamakisquare 2011-12-22 18:19:25

如何使其不可見，但絕對定位關閉屏幕的左邊：

CSS：

#yourelement, .hidden { 
    visibility : hidden; 
    position : absolute; 
    left  : -1000px; 
    width  : 1px; 
    height  : 1px; 
    overflow : hidden; 
}

來源

2011-12-22 01:49:43 nnnnnn

我是爲這個答案，雖然我會改變左：-9999em，-1000px似乎太少了+1280 res顯示器.. – 2011-12-22 02:41:34

@Nacho - 謝謝，但我不知道顯示器的決議如何重要。重點是將元素向左移動足夠遠，以使其最右邊的點仍然離開屏幕的_left_邊緣。（顯然，如果試圖移動屏幕邊緣，分辨率會很重要。） – nnnnnn 2011-12-22 03:04:52

這正是我所說的，-9999（em或px）不會傷害 – 2011-12-22 08:21:53

設置display: none;不會禁用元素的事件，但會阻止它被點擊因爲元素沒有像素尺寸可以點擊進去。您仍然可以通過編程方式調用其onclick事件。 See an example

來源

2011-12-22 01:49:47

欣賞幫助。但是我正在尋找的是一種觸發文件輸入元素的「選擇文件」對話框的方法。在元素上調用'.call（）'是我能想到的最直接的解決方案，因此也是一個問題。有了你的解決方案，我實際上必須定義元素如何表現它的'onclick'，但我需要的只是讓它正常運行 - 顯示「選擇文件」對話框。 – tamakisquare 2011-12-22 02:28:27

我在帖子中添加了一個示例。 – tamakisquare 2011-12-22 02:31:00

更少的代碼：

position: fixed; z-index: -1;

來源

2017-09-27 12:58:02

如何隱藏一個元素而不佔用空間並仍然對事件做出響應？

回答

相關問題