js 实现单击、双击事件

js 实现绑定按钮单击、双击事件：

<button id="clickBtn1">单击/双击按钮1</button>
<button onclick="btnClick()" ondblclick="btndbClick()">单击/双击按钮2</button>

    // 方法一var clickBtn = document.getElementById("clickBtn1");clickBtn.onclick = function () {console.log("单击==")}clickBtn.ondblclick = function () {console.log("双击---");}// 方法二function btnClick(e) {console.log("单击==")}function btndbClick(e) {console.log("双击---");}

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

双击时不想触发单击事件代码：

    var clickTimer = null;function btnClick(e) {clearTimeout(clickTimer);  //首先清除计时器clickTimer = setTimeout(() => {console.log("单击==")},200);}function btndbClick(e) {clearTimeout(clickTimer);console.log("双击---");}

js 实现单击、双击事件相关推荐

JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突，双击事件触发单击事件
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突. 我们加一个延迟时间就能很好的解决这个问题. 原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 ...
JS中解决单击双击事件的冲突
当一个元素上即绑定了单击事件又绑定了双击事件,双击元素时会先触发单击事件,没有达到我们理想的效果从而影响了用户体验. 解决方法: // 解决同一个元素使用单击双击事件的冲突 // 解决思路:单击事件后 ...
js区分单击双击，双击不会触发单击事件
如果一个按钮,单击触发的事件跟双击触发的是不同的业务,那么这里介绍的就是如何处理双击的过程中不触发单击事件的方法 <html><meta charset="UTF-8&qu ...
JS中解决单击双击事件的冲突的问题
当一个父节点上即绑定了双击事件,子节点又绑定了单击时,单击或双击子节点时,根据事件流中的冒泡阶段都会先触发子节点上的单击事件,然后冒泡到父节点,而有时我们并不想要子节点的单击事件触发解决思路: 1. ...
js自定义双击事件(可更改双击触发间隔，解决单击双击事件冲突)
思路: 设置一个计数器,用来记录点击的次数. 点击第一次:创建定时器,300毫秒后,执行单击操作,并将计数器归零点击第二次:定时器还没有触发,删除定时器.执行双击操作,并将计数器归零 // 定时器 ...
js:如何实现双击事件
思路设置一个全局变量clock=0: 每次调用这个方法把clock++,然后开启一个setTimeout为500毫秒,到时间后把clock清零: 然后在这之外判断,if(clock==2){执行相应 ...
javascript 鼠标单击和双击事件并存的实现方法
http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上 ...
【JavaScript】jQuery 实现耦合的鼠标单击与双击事件
jq 实现单击双击事件 jq 的 dblclick 和 click 互相独立,在触发 dblclick 的基础上也会触发两次 click 这里演示一种使其互相耦合的 demo var click = ...
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示出现问 ...
html 记录点击次数,jquery/js记录点击事件，单击次数加一，双击清零
目的:点击按钮,点击后在网页上显示点击次数,双击清零实现:js或者jquery 代码如下: pageEncoding="utf-8"%> 点击事件 window.onloa ...

js 实现单击、双击事件

js 实现单击、双击事件相关推荐

最新文章

热门文章