공간을 차지하지 않고 요소를 숨기고 이벤트에 계속 응답하는 방법은 무엇입니까?

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

시도했지만 작동하지 않았습니다. 숨겨져 있지만, 여전히 공간을 차지했습니다. 당신은 볼 수 있습니다 [내 예] (http://jsfiddle.net/ahmoo/t2BHg/1/) – tamakisquare

나는 당신을 포기해야합니다 언급 : 절대 잊지 말고! 미안합니다. :) 나는 내 대답을 업데이 트했습니다. – techfoobar

당신은 그것을 가시성을 만들 수 : 0

출처

2011-12-22 01:48:24 khael

아니 완벽한 솔루션을 작은 공간 ([여기를 보라] (http : // j sfiddle.net/ahmoo/nGAee/1/)). 더 나은 대답이 있는지 좀 더 살펴 보겠습니다. 그렇지 않으면, 나는 당신의 해결책을 가지고 갈 것입니다. 고마워. – tamakisquare

에 숨겨져 폭과 높이를 설정하는 방법 화면의 왼쪽 오프 절대 위치에 있지만, 그것은 눈에 보이지 않는 만드는 약 :

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 해상도 모니터에 너무 적게 보인다. .. –

@Nacho - 고맙지 만 모니터의 해상도가 어떻게 중요한지 잘 모르겠다. 요점은 요소를 왼쪽으로 충분히 멀리 이동시켜 가장 오른쪽 지점이 여전히 화면의 _ 가장자리에서 벗어나게하는 것입니다. (분명히 화면의 _ 가장자리에서 벗어나려고하면 해상도가 중요 할 것입니다.) – nnnnnn

정확히 내가 말하고있는 것이고 -9999 (em 또는 px)는 해를 끼치 지 않습니다 –

설정 display: none;은 요소의 이벤트를 비활성화하지 않지만 클릭하지 못하도록합니다. 요소에 클릭 할 픽셀 크기가 없기 때문입니다. 프로그래밍 방식으로 onclick 이벤트를 계속 호출 할 수 있습니다. See an example

출처

2011-12-22 01:49:47

도움말에 감사드립니다.그러나 내가 찾고있는 것은 파일 입력 요소의 "파일 선택"대화 상자를 트리거하는 방법입니다. 요소에'.call()'을 호출하는 것이 내가 생각할 수있는 가장 간단한 해결책이며 따라서 질문이된다. 당신의 솔루션으로, 실제로 요소가 'onclick'에 대해 어떻게 작동하는지 정의해야하지만, 필요한 것은 정상적으로 작동하는 것입니다 - "파일 선택"대화 상자를 보여줍니다. – tamakisquare

내 게시물에 예제를 추가했습니다. – tamakisquare

적은 코드 : 여전히 같은

position: fixed; z-index: -1;

출처

2017-09-27 12:58:02

공간을 차지하지 않고 요소를 숨기고 이벤트에 계속 응답하는 방법은 무엇입니까?

답변

관련 문제