click

이동:
  1. 속성
  2. 예제
  3. 명세
  4. 브라우저 호환성
  5. 같이 보기

click 이벤트는 포인팅 디바이스 버튼(일반적으로 마우스 기본 버튼)이 하나의 요소(엘리먼트)에서 눌려지고 놓을 때 시작합니다.

Interface MouseEvent
Sync / Async Sync
Bubbles Yes
Cancelable Yes
Target Element
Composed Yes
Default Action Varies

속성

Property Type Description
target Read only EventTarget 이벤트 타겟 (DOM 트리 내에서의 최상위 타겟).
type Read only DOMString 이벤트의 타입.
bubbles Read only Boolean 이벤트가 정상적으로 버블을 발생시키는지 여부
cancelable Read only Boolean 이벤트 취소 가능 여부
view Read only WindowProxy Document.defaultView (문서의 window)
detail Read only long (float) 짧은 시간 내에 발생한 연속 클릭 수로, 1씩 증가합니다.
currentTarget Read only EventTarget 이벤트 리스너가 연결된 노드.
relatedTarget Read only EventTarget ouseover, mouseout, mouseenter, mouseleave 이벤트: 이벤트에 대한 보조 타겟 (mouseenter 의 경우는 mouseleave 타겟). 그렇지 않으면 null을 반환합니다.
screenX Read only long 글로벌(스크린) 좌표에서 마우스 포인터의 X 좌표.
screenY Read only long 글로벌(스크린) 좌표에서 마우스 포인터의 Y 좌표.
clientX Read only long 로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 X 좌표.
clientY Read only long 로컬(DOM 컨텐츠) 좌표에서 마우스 포인터의 Y 좌표.
button Read only unsigned short 마우스 이벤트가 발생했을 때 누른 버튼 번호: 왼쪽 버튼=0, 가운데 버튼=1 (있다면), 오른쪽 버튼=2. 왼손잡이용 마우스의 경우 버튼 동작을 반대로하면, 값은 오른쪽에서 왼쪽으로 읽습니다.
buttons Read only unsigned short 마우스 이벤트가 발생했을 때 눌려진 버튼: 왼쪽 버튼=1, 오른쪽 버튼=2, 가운데(휠) 버튼=4, 4번째 버튼(일반적으로 브라우저의 뒤로가기 버튼)=8, 5번째 버튼 (일반적으로 앞으로가기 버튼)=16. 두개 이상의 버튼을 누르면, 값의 논리합이 반환됩니다. 예를 들어 왼쪽 버튼과 오른쪽 버튼을 누르면 3이 반환됩니다. (1 | 2). 보다 자세한건 여기를 참조하세요.
mozPressure Read only float 이벤트를 발생시킬 때 터치 또는 탭 장치에 적용되는 압력의 양; 이 값의 범위는 0.0(최소 압력)과 1.0(최대 압력) 사이 입니다.
ctrlKey Read only Boolean 이벤트가 발생했을 때 컨트롤 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다.
shiftKey Read only Boolean 이벤트가 발생했을 때 시프트 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다.
altKey Read only Boolean 이벤트가 발생했을 때 알트 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다.
metaKey Read only Boolean 이벤트가 발생했을 때 메타 키가 눌러져 있으면 true 그렇지 않으면 false 를 반환합니다.

예제

다음 예제는 <button>의 연속한 클릭 수를 표시합니다.

HTML

<button>Click</button>

JavaScript

const button = document.querySelector('button');

button.addEventListener('click', event => {
  button.innerHTML = `클릭 수: ${event.detail}`;
});

결과

빠르고 반복적인 클릭으로 카운터를 늘려보세요. 클릭 중간에 쉬면 숫자가 초기화됩니다.

명세

Specification Status Comment
UI Events Working Draft Specifies this event as composed.
Document Object Model (DOM) Level 3 Events Specification
The definition of 'click' in that specification.		 Obsolete  
Document Object Model (DOM) Level 2 Events Specification
The definition of 'click' in that specification.		 Obsolete Initial definition.

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
On disabled form elements (Yes)[1] No support (Yes)[2] No support (Yes)[1] ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?
On disabled form elements ? No support ? ? ? ?

[1] <textarea> 요소와 <input> 요소의 일부 타입에서만 작동합니다.

[2] 인터넷 익스플로러에서는 <input> 요소의 타입이 checkbox, radio 인 경우, 더블클릭을 하더라도 click 이벤트만 트리거합니다.

Internet Explorer

인터넷 익스플로러 8, 9는 계산된 transparent가 적용된 background-color를 가진 요소가 다른 요소(이벤트가 바인드 되어 있는)와 겹쳐 있을 때 클릭이벤트를 받지 못하는 버그로 고통받고 있습니다. 클릭 이벤트는 아래에 있는(z-index가 낮은, 뒤에있는) 요소에서 대신 발생합니다. 데모롤 보려면 이 라이브 예제를 참조하세요.

이 버그에 대한 알려진 해결 방법:

Safari Mobile

사파리 모바일 7.0+ (그리고 너무 일찍 나온 버전들) 에서, 일반적으로 대화형(typically interactive)이 아닌 요소(예를들어 <div>) 및 요소에 직접 연결된 이벤트 리스너가 없는 요소(예를들면, event delegation을 사용중인)에서는 클릭 이벤트가 발생하지 않는 버그에 고통받고 있습니다. 데모를 보려면 이 라이브 예제를 참조하세요. 또한 사파리에서 요소를 클릭할 수 있게 만들기 와 "클릭가능한 요소"의 정의를 참조하세요.

이 버그에 대해 알려진 해결 방법:

  • 해당 요소나 조상 요소에 cursor: pointer; 를 설정합니다.
  • 요소나 그 상위 요소에 더미 onclick="void(0)" 속성(어트리뷰트)를 추가합니다. 그러나 <body>를 포함할 수 없습니다.
  • 일반적으로 대화형이 아닌 요소(예: <div>) 대신에 일반적으로 대화형인 요소(예:  <a>)를 사용합니다.
  • click event delegation 사용을 멈춥니다.

사파리 모바일은 다음 요소를 일반적으로 대화형으로 간주합니다(따라서 다음의 요소들은 이 버그의 영향을 받지 않습니다.):

  • <a> (하지만 반드시 href를 사용해야 합니다.)
  • <area> (하지만 반드시 href를 사용해야 합니다.)
  • <button>
  • <img>
  • <input>
  • <label> (하지만 반드시 form control과 연결되어야 합니다.)
  • <textarea>
  • 이 목록은 불완전합니다; 테스팅/연구 및 확장을 통해 MDN을 도울 수 있습니다.

같이 보기

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: mdnwebdocs-bot, irenesmith, alattalatta, ExE-Boss, DeadIntegral
최종 변경자: mdnwebdocs-bot,