Jquery 마우스 클릭 이벤트 / .click(), .dblclick()

Jquery - 마우스 클릭 이벤트인 click, dblclick 이벤트 알아보기

.click() 이벤트

이벤트 핸들러를 "click" Javascript 이벤트에 바인드 하거나 요소에서 해당 이벤트를 트리거 한다.

사용 방법은 .on("click", handler), .trigger("click") 이벤트 요소를 사용합니다.

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

위 소스의 렌더링 된 HTML 입니다.

이벤트 핸들러를 통해 click 이벤트로 바인딩 하는 예제 입니다.

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

target 요소를 클릭할 때 이벤트가 발생되어 alert 문구가 표시 됩니다.

다른 요소를 클릭해 이벤트를 트리거 할 수도 있습니다.

$( "#other" ).click(function() {
  $( "#target" ).click();
});

위 클릭 이벤트가 실행되면 트리거된 target 이벤트가 호출 됩니다.

일반적으로 조치를 취하기 전에 원하는 순서대로 지정해서 이벤트를 사용하시면 됩니다.

클릭 이벤트가 필요하지 않은 경우 mousedown 또는 mouseup 이벤트가 더 적합할 수 있습니다.

.dblclick() 이벤트

다음은 dblclick() 이벤트 입니다.

마우스를 더블클릭 했을 때 이벤트가 발생 됩니다.

.on("dblclick", handler), .trigger("dblclick") 함수로 사용할 수 있습니다.

<div id="target">
  Double-click here
</div>
<div id="other">
  Trigger the handler
</div>

위 소스의 렌더링 된 HTML 입니다.

이벤트 핸들러를 통해 dblclick 이벤트로 바인딩 하는 예제 입니다.

$( "#target" ).dblclick(function() {
  alert( "Handler for .dblclick() called." );
});

target 요소를 더블클릭할 때 이벤트가 발생되어 alert 문구가 표시 됩니다.

다른 요소를 클릭해 이벤트를 트리거 할 수도 있습니다.

target 요소를 더블클릭하는 트리거를 생성하는 예제 입니다.

$( "#other" ).click(function() {
  $( "#target" ).dblclick();
});

other 요소의 클릭이벤트로 target 요소를 더블클릭 합니다.

핸들러를 동일한 요소에 대한 click및 dblclick이벤트 모두에 바인드하지 않는 것이 좋습니다 . 트리거되는 이벤트 순서는 브라우저마다 다르며 일부는 click이전에 두 개의 이벤트를 수신 dblclick하고 다른 하나는 하나만 수신 합니다 . 두 번 클릭 감도 (더블 클릭으로 감지되는 최대 클릭 시간)는 운영 체제와 브라우저에 따라 다를 수 있으며 종종 사용자가 구성 할 수 있습니다.