Home  >  Article  >  Web Front-end  >  The event attribute ondblclick that is triggered when the mouse double-clicks an element in html

The event attribute ondblclick that is triggered when the mouse double-clicks an element in html

黄舟
黄舟Original
2017-11-06 09:49:405521browse

Example

When the mouse button is double-clicked, a section of JavaScript is executed:

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

Browser support


IE

Firefox

Chrome

Safari

Opera


All major browsers support the ondblclick attribute.

Definition and usage

ondblclick attribute is triggered when the mouse double-clicks the element.

Note: The ondblclick attribute does not apply to the following elements: dde6fb694e6711ae5e6f381704c04ae4, 71af07a0e88a1ac1ff73f855702ac153, 0c6dc11e160d3b678d68754cc175188a, 93f0f5c25f18dab9d176bd4f6de5d30e, 100db36a723c770d327fc0aef2ce13b1, d5ba1642137c3f32f4f4493ae923989c , e8e496c15ba93d81f6ea4fe5f55a2244, 0c68fef83818661b6da588c77ca3985e, 3f1c4e4b6b16bbbd69b2ee476dc4f83a, c9ccee2e6ea535a969eb3f532ad9fe89 or b2386ffb911b14667cb8f0f91ea547a7.

Differences between HTML 4.01 and HTML5

None.

Syntax

<element ondblclick="script">

Attribute value

ValueDescriptionscriptScript that runs when ondblclick occurs.
In a recent project, I encountered the need to add

onclick and ondblclick two events on the same DOM element. If you follow the normal Method to add processing, it turns out that only onclick will be executed,

but not ondblclick; at this time, we need to slightly process the processing functions of the two events to achieve the coexistence of the two events. The code is as follows:

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

The above is the detailed content of The event attribute ondblclick that is triggered when the mouse double-clicks an element in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn