`

同一个dom元素上操作onclick和dbonclick

阅读更多
在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,
处理思想就是:利用定时器延迟执行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("onclick");
      }, 300);
  }

   function _dbonclick(){
      if(clickTimer) {
          window.clearTimeout(clickTimer);
          clickTimer = null;
      }
      
     // your click process code here
     alert("dbonclick");
  }
</script>

<button onclick="_click();" dbonclick="_dbonclick();">单击或双击</button>
2
1
分享到:
评论

相关推荐

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    JS操作DOM元素属性和方法大全

    - `querySelector`: 获取匹配CSS选择器的第一个元素。 - `querySelectorAll`: 获取匹配CSS选择器的所有元素。 2. **创建和插入元素** - `createElement`: 创建新的HTML元素。 - `appendChild`: 在指定元素的子...

    JavaScript dom操作 添加和替换元素 示例代码

    JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换元素 示例代码JavaScript dom操作 添加和替换...

    JavaScript dom操作 访问和修改元素 示例代码

    JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改元素 示例代码JavaScript dom操作 访问和修改...

    JavaScript dom操作 删除元素 示例代码

    JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四:HTML DOM-文档元素的操作(二)

    DOM是HTML和XML文档的一种结构化表示,它将网页内容转化为树形结构,使得JavaScript可以方便地访问和修改每个元素。在这个部分,我们将学习更多关于DOM元素操作的方法和技巧。 首先,`getElementById()`是获取特定...

    .遍历DOM元素

    DOM元素遍历是Web开发中的基础技能,用于访问和操作网页上的每一个节点。本篇文章将深入探讨如何遍历DOM元素,包括不同遍历方法、遍历的应用场景以及注意事项。 一、DOM遍历方法 1. 前向遍历(深度优先遍历) ...

    WEB中截屏某一个DOM

    在网页开发中,有时我们...总的来说,截屏DOM元素涉及到了前端技术的多个方面,包括DOM操作、Canvas绘图、跨域策略和第三方库的使用。通过理解和掌握这些知识点,我们可以有效地在网页上实现特定DOM元素的截屏功能。

    Jquery方式获取iframe页面中的 Dom元素

    在具体的实现过程中,需要注意iframe中的内容必须和主页面出于同一个域中,否则会受到浏览器同源策略的限制,无法获取到其中的DOM元素。这是因为浏览器安全策略不允许跨域访问DOM。 首先,确保iframe元素在HTML页面...

    选取DOM元素的方法(教辅)

    选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)选取DOM元素的方法(教辅)...

    JS操作DOM元素属性和方法.pdf

    - DOM Level 1: 包括核心DOM,提供了遍历和操作文档树的基本方法和接口。 - DOM Level 2: 在Level 1的基础上增加了更丰富的接口,如查看和获取样式表信息的接口。 - DOM Level 3: 扩展了DOM的应用,比如增加了...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    DOM为这些节点提供了访问和操作的接口。 ### 获取DOM元素 1. `getElementById`:通过元素的ID属性获取单个元素。 2. `getElementsByTagName`:根据标签名获取一组元素,返回的是一个NodeList集合。 3. `...

    解决vue页面DOM操作不生效的问题

    在Vue框架中,页面动态更新是非常常见的需求,但有时候开发者可能会遇到在页面上进行DOM操作不生效的问题。这种情况通常发生在某些数据更新之后,但直接进行DOM操作时,并没有取得预期效果。Vue使用的是虚拟DOM...

    JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个...

    跨frame操作dom元素

    本文将深入探讨这个主题,并结合标签“源码”和“工具”,为你揭示如何在不同frame之间交互和操作DOM。 首先,理解frame的概念至关重要。在HTML中,frame是用来将一个网页划分为多个独立浏览区域的元素,每个区域...

    JQuery DoM和ajax 操作

    jQuery提供了丰富的选择器、遍历和操作方法,使得DOM操作变得简单易行。 1. **选择器**: jQuery提供了多种CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),以及组合选择器等,使我们能够快速...

    原生js操作dom实现上下左右移动.docx

    DOM将文档表示为一个树形结构,其中每个节点代表文档中的一个元素、属性或文本。 在本文中,我们将使用JavaScript来操作DOM,实现上下左右移动的功能。我们将使用getElementsByClassName和getElementsByTagName方法...

    unigrid添加html5 dom元素.rar

    标题"unigrid添加html5 dom元素.rar"暗示了这个压缩包可能包含一个教程或代码示例,指导如何在使用Unigrid组件的Delphi项目中集成HTML5 DOM元素。Unigrid是Delphi中用于显示和编辑表格数据的第三方组件,它允许...

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    iframe元素中的内容对于外部页面来说是隔离的,有自己的DOM树和执行上下文。因此,直接操作iframe内部的DOM元素是不可能的,除非通过特定的JavaScript代码来实现。 在父页面中获取iframe内部的DOM元素可以通过以下...

    iframe的DOM操作

    iframe的DOM操作 iframe的DOM操作 iframe的DOM操作 iframe的DOM操作

Global site tag (gtag.js) - Google Analytics