>웹 프론트엔드 >HTML 튜토리얼 >마우스가 html의 요소를 두 번 클릭할 때 트리거되는 이벤트 속성 ondblclick

마우스가 html의 요소를 두 번 클릭할 때 트리거되는 이벤트 속성 ondblclick

黄舟
黄舟원래의
2017-11-06 09:49:405574검색

마우스 버튼을 두 번 클릭할 때 JavaScript 실행:

<button ondblclick="copyText()">Copy Text</button>

Browser support


IE

Firefox

Chrome

Safari

Opera


전공 브라우저 둘 다 ondblclick 속성을 지원합니다.

정의 및 사용법

ondblclick 속성은 마우스가 요소를 두 번 클릭할 때 트리거됩니다.

Note: ondblclick 속성은 다음 요소에 적용되지 않습니다: dde6fb694e6711ae5e6f381704c04ae4, 71af07a0e88a1ac1ff73f855702ac153, 0c6dc11e160d3b678d68754cc175188a, 93f0f5c25f18dab9d176bd4f6de5d30e, 100db36a723c770d327fc0aef2ce13b1, d5ba1642137c3f32f4f4493ae923989c, , <script>, <style> 또는 <title>. </script>

HTML 4.01과 HTML5의 차이점

없음.

Syntax

<element ondblclick="script">

속성값

Value Description
script ondblclick이 발생할 때 실행되는 스크립트입니다.

최근 프로젝트에서 동일한 DOM 요소에 onclick 및 ondblclick 2 events를 추가해야 할 필요성을 느꼈습니다. 일반적인 방식으로 처리를 추가하면 onclick만 실행된다는 것이 밝혀졌습니다.

하지만 ondblclick은 실행되지 않습니다. ; 이때 두 이벤트의 공존을 달성하기 위해 두 이벤트의 처리 기능을 약간 처리해야 합니다.

<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>

위 내용은 마우스가 html의 요소를 두 번 클릭할 때 트리거되는 이벤트 속성 ondblclick의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.