javascript - 如何在不占用空间的情况下隐藏一个元素，仍然响应事件？

Question

display:none 将元素从布局流中移除，因此不会占用页面空间，但它的事件会被禁用。

visibility:hidden 隐藏元素，但元素仍然占用空间。

我需要一种方法来隐藏文件输入元素而不占用空间并在我调用它的 .click() 事件时做出响应。

Example

Answer 1

只需将不透明度设置为 0 即可。该元素不会出现，也不会占用空间。它的事件将起作用。

在提供不透明度时，还要指定所有浏览器的不透明度对应项(-moz..、-webkit、filter: ..)等，以确保跨浏览器兼容性。

编辑

你的风格应该是这样的:

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

此处的工作演示:http://jsfiddle.net/t2BHg/6/