js实现——鼠标单击事件-onclick和双击事件-ondblclick

onclick：单击
ondblclick：双击

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 方法一 --><button id="clickBtn1">单击/双击按钮1</button><!-- 方法二 --><button onclick="btnClick()" ondblclick="sClick()">单击/双击按钮2</button><!-- 定稿 --><button onclick="dClick()">单击</button><button ondblclick="dblclick()">双击按钮</button><button onclick="dClick()" ondblclick=" dblclick()">单击/双击按钮</button><script>// 方法一var clickBtn = document.getElementById("clickBtn1");clickBtn.onclick = function () {console.log("单击==")}clickBtn.ondblclick = function () {console.log("双击---");}// // 方法二function btnClick(e) {console.log("单击==")}function sClick(e) {console.log("双击---");}// 定稿var time = null;//单击事件function dClick(e) {// console.log("单击=====")//取消上次延时未执行的方法clearTimeout(time); //首先清除计时器//设置延时300mstime = setTimeout(function () {//   time = setTimeout( ()=> {//在此写单击事件要执行的代码console.log("单击==")}, 300);}//双击事件function dblclick() {//取消上次延时未执行的方法clearTimeout(time);//下面写双击事件要执行的代码console.log("双击---");}</script>
</body></html>

注意：

定时器时间要大于300ms

当同时绑定单击和双击事件时，会触发两次单击事件和一次双击事件：

效果

js实现——鼠标单击事件-onclick和双击事件-ondblclick相关推荐

鼠标单击经常被当做双击的问题
前一段鼠标不知怎么回事,出现了单击经常被当做双击的问题,比如要关闭一个窗口,结果关闭了两个:要选中一个文件,结果变成了打开文件. 找来找去,网上说有诸多可能原因,但始终没有有效解决办法. 这两天下了个 ...
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示出现问 ...
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突，双击事件触发单击事件
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突. 我们加一个延迟时间就能很好的解决这个问题. 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 ...
鼠标单击、右击、双击、鼠标悬停、鼠标拖动
1.鼠标单击: 鼠标的单击可以直接调用click()方法: driver.find_element_by_id("submi").click() 只需要找到需要点击的元素,在进行点 ...
用js 实现鼠标移动，移入，移出事件
示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
vue给同一元素绑定单击click和双击事件dblclick，双击事件dblclick无效不触发解决办法
有时vue项目中无论是v-ondblclick:还是@dblclick ,有时会无效果.解决办法直接上代码自己看. .native主要用于监听组件根元素的原生事件 @dblclick.native= ...
html双击事件 jq,jQ双击事件用原生写的方法.html
ondblclick事件 htmlOndblclickHandler html元素不加on不会触发事件 htmlOndblClick jsOndblClick addEventListener // ...
javascript 鼠标单击和双击事件并存的实现方法
http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上 ...
DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
鼠标事件深入点击事件 = mousedown + mouseup position: absolute 会将内联元素变为块级(比如a) a标签的协议限定符(伪协议,防止跳转和刷新,让href不生效) ...
java监听鼠标双击_java鼠标双击事件 java鼠标双击监听
爱学习的小伙伴们,可能都学习过java,但是你知道java鼠标双击事件是怎么实现的吗?不知道的话跟着小编一起来学习了解java鼠标双击事件吧. java鼠标双击事件实例介绍 public class ...

js实现——鼠标单击事件-onclick和双击事件-ondblclick

js实现——鼠标单击事件-onclick和双击事件-ondblclick

代码

js实现——鼠标单击事件-onclick和双击事件-ondblclick相关推荐

最新文章

热门文章