onClick 이벤트와 onDblClick 이벤트의 공존에 대한 자세한 설명

이번에는 onClick 이벤트와 onDblClick 이벤트의 공존에 대한 자세한 설명을 가져왔습니다. onClick 이벤트와 onDblClick 이벤트의 공존 시 주의사항은 무엇인가요?

이 문서의 예에서는 동일한 DOM 요소에 onClick 이벤트와 onDblClick 이벤트를 공존시키는 JS 솔루션을 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

최근 프로젝트에서 동일한 DOM 요소에 onclick과 ondblclick이라는 두 개의 이벤트를 추가해야 하는 경우를 만났습니다. 일반적인 방법으로 처리를 추가하면, onclick만 실행되고 실행되지 않는 것으로 나타났습니다. 이때 두 이벤트의 공존을 달성하려면 두 이벤트의 처리 기능을 약간 처리해야 합니다.

<script type="text/javascript">
 var clickTimer = null;
 function _click(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   clickTimer = window.setTimeout(function(){
      // your click process code here
      alert("你单击了我");
   }, 300);
 }
  function _dblclick(){
   if(clickTimer) {
     window.clearTimeout(clickTimer);
     clickTimer = null;
   }
   // your click process code here
   alert("你双击了我");
 }
</script>
<button onclick="_click();" ondblclick="_dblclick();">单击或双击我</button>

처리 아이디어는 타이머를 사용하여 onclick 이벤트 실행을 지연시켜 두 번 클릭 프로세스 중에 중간에 트리거된 클릭 이벤트가 취소되도록 하는 것입니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

프로젝트에서 JS 이벤트 위임을 사용하는 방법

WeChat 애플릿 로그인 인증을 처음부터 시작하기

위 내용은 onClick 이벤트와 onDblClick 이벤트의 공존에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!