原生js解决dblclick双击和mousedown，mouseup鼠标按下抬起冲突问题

最近在开发项目中遇到这么一条需求，canvas画布上实现图形的拖拽以及双击结束多边形画图的功能。但是遇到了鼠标事件冲突的问题。参考网上demo最后确定的实现思路是，使用setTimeout方法。判断一下延迟250ms后是否鼠标按下了一次。若按下了一次，则是mousedown事件，大于1次则是dblclick事件。

mousedown (event){if (event.button === 0)//判断左右鼠标中键 0为左键 2为右键{if(leftDownCount === 0)//当此全局变量为0时，说明鼠标还没有按下过{leftDownCount++;//定义一个全局变量 每按下一次此变量加1以此判断按下了几次leftDownInterval = setTimeout( ()=>{this._compareLeftDownFun();}, 500);}else{leftDownCount++;//当鼠标多次按下时，此全局变量依次加一}}else if (event.button === 2)//判断鼠标右键{if(trightDownCount === 0)//与左键的判断同理{rightDownCount++;rightDownInterval = setTimeout( ()=>{_compareRightDownFun();}, 500);}else{rightDownCount++;}}}

同理判断和抬起的矛盾时，也是这个思路判断。但是比较不合理的是，使用了计时器导致鼠标动作在效果上有延迟，体验不是太好，如果大神们有其它思路，欢迎留言啊。

原生js解决dblclick双击和mousedown，mouseup鼠标按下抬起冲突问题相关推荐

js检测鼠标是否在操作_原生JS趣味demo：炫酷头像鼠标追随效果的实现
我们常在一些网页中可以看到鼠标追随效果一个简单的图片.动画甚至一小段文字都可以作为鼠标跟随的载体之前咱们的直播课中老师也讲过相关的canvas追随粒子特效今天就让我们一起来用原生js ...
原生js解决表格奇偶列显示
本方案重点在于掌握table的 rows属性和 row的cells属性. 解决的问题: 例子: 奇偶列不同颜色显示个人实际运用: 表格内部内容我想要让内容相对靠近, 奇数列靠右,偶数列靠左, 用 ...
原生js 解决offsetX兼容性问题
// 针对火狐不支持offsetX/Y function getOffset(e) {var target = e.target, // 当前触发的目标对象eventCoord,pageCoord,o ...
uniapp小程序鼠标按下抬起，@input=“down“轻松解决
<u-input v-model="value" @input="down" type="text" placeholder=&quo ...
原生JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
原生js从零实现图片裁切
效果图在我的上一篇文章已经介绍过如何实现图片压缩,本篇文章主要讲解在此基础上单独实现的图片裁剪功能. 点击选择文件上传一张图片,点击裁切时会出现裁剪框,移动或拉伸裁剪框会在下方生成裁剪后的图片.点击 ...
html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果
原生js实现鼠标按下拖拽效果,供大家参考,具体内容如下鼠标拖动 body { margin: 0; } div { width: 200px; height: 200px; position: ab ...
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示出现问 ...
js区分click事件和mousedown、单击和双击事件
一.点击和拖动 1.问题对于同一个对象进行的操作涉及点击(click)和拖动(mousedown,mousemove,mouseup),而拖动中又会触发一次点击事件 2.解决:设置全局变量判断点击之 ...

原生js解决dblclick双击和mousedown，mouseup鼠标按下抬起冲突问题

原生js解决dblclick双击和mousedown，mouseup鼠标按下抬起冲突问题相关推荐

最新文章

热门文章