html中在鼠标双击元素时触发的事件属性ondblclick

程序员文章站 2022-03-28 12:54:55

...

实例

当双击鼠标按钮时执行一段 JavaScript：

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

浏览器支持

Firefox

Chrome

Safari

Opera

所有主流浏览器都支持 ondblclick 属性。

定义和用法

ondblclick 属性在鼠标双击元素时触发。

注释：ondblclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

HTML 4.01 与 HTML5 之间的差异

无。

语法

<element ondblclick="script">

属性值

值	描述
script	发生 ondblclick 时运行的脚本。

最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行 onclick，

而不会执行 ondblclick；这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了，代码如下：

<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的详细内容，更多请关注其它相关文章！

html中在鼠标双击元素时触发的事件属性ondblclick

在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,

html中由元素上的鼠标点击触发的事件属性onclick

html中在鼠标双击元素时触发的事件属性ondblclick

html中用户（在键盘上）释放按键时触发的事件属性onkeyup

html5中在可拖动的元素或选取的文本移出放置目标时执触发的事件ondragleave

html5中在元素滚动条在滚动时触发的事件onscroll

html5中在可拖动元素或选取的文本放置在目标区域时触发的事件ondrop

html5中在可拖动元素或选取的文本正在拖动到放置目标时触发的事件ondragover

H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter

html在鼠标按钮在元素上按下时触发的事件属性onmousedown