내 앵커에 이미지가있는 onclick 이벤트가 실행되지 않는 이유는 무엇입니까?

Question

저는 zeroclipboard API를 사용하여 클립 보드로 복사 작업을하고 있습니다. 다음과 같이 내가 HTML 앵커와 함께 간단한 테스트 페이지를 만들어 :

<a href="#" id="copy" >copy</a> 

을 복사 링크를 클릭하면 텍스트가 모든 JS 이벤트가 발사되고 콘솔에 제대로 기록되고 클립 보드에 복사되지만 때 더 나은 사용자 경험을위한 앵커 내부 이미지를 가지고 위의 예제를 변경하지 :

<a href="#" id="copy" ><img src="copy.gif" alt="copy"/></a> 

은 ... 코드는 더 이상 작동 않으며, 어떤 이벤트를 해고하지 않습니다.

Answer 1

CSS를 사용하여 이미지를 a 요소의 배경 이미지로 설정하십시오.

#copy { 
    background-image: url('copy.jpg') 
    display: block 
    width: XXXpx 
    height: YYYpx 
} 

a 요소가 스팬처럼 동작하도록하려면 display: inline-block을 사용할 수 있습니다.