다른 개체에 JS 이벤트 위임

Question

입력 파일 요소를 다시 스킨하려고합니다.

두 개의 요소를 서로 겹쳐서 만듭니다. 그 중 하나는 입력 태그이고 다른 하나는 멋진 버튼입니다. 이런 식으로 뭔가 : 사용자가 가져 가면

<input type="file" id="filesButton" multiple> 
<input type="button" id="filesButtonOverlay" value="Add Files"> 

버튼은 몇 가지 좋은 효과를 가지고, 클릭 수 등 (모든 수행하는 CSS)입니다. 그러나 input-type-file은 더 높은 Z- 인덱스를 가지고 있기 때문에 (클릭을 에뮬레이트 할 수 없기 때문에 필요합니다) 이러한 모든 효과는 나타나지 않습니다.

input-type-file이 가져 오는 모든 이벤트를 위임하고 버튼에서 트리거하는 좋은 방법이 있습니까?

Answer 1

div에 입력을 래핑하고 div에 이벤트를 첨부하면 어떨까요? 그런 다음 변경 사항을 사용하여 버튼을 타겟팅합니까?

Answer 2

공유 부모와 함께이 작업을 수행 할 수 있어야한다고 생각합니다. 그런 다음 hover을 버튼 자체가 아닌 부모에 배치합니다. 당신이 잠재적으로 같은 페이지에 여러있을 수 있다면

#wrapper:hover #filesButtonOverlay{ 
    stuff: 
} 

하면, 당신은 클래스 대신 id의

를 사용하여 변경하고자하는 것 :

---

$("#wrapper").hover(function(){ 
    $("#filesButtonOverlay").dosomething(); 
}); 

또는 CSS에서

<span id="wrapper"> 
    <input type="file" id="filesButton" multiple> 
    <input type="button" id="filesButtonOverlay" value="Add Files"> 
</span>