javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化

    /*** 函数防抖（目标时间段内，目标函数只执行最后一次）* @param {*} func 目标函数* @param {*} wait 目标时间段* @param {*} immediate 是否立即执行一次* @returns*/function useDebounce(func, wait, immediate) {let timer;return function() {let context = this;let args = arguments;if (timer) clearTimeout(timer);if (immediate) {var callNow = !timer;timer = setTimeout(() => {timer = null;}, wait);if (callNow) func.apply(context, args);} else {timer = setTimeout(function() {func.apply(context, args);}, wait);}};}

/*** 事件区分处理（左键、右键、双击）* 解决与鼠标拖拽冲突* @param {*} 支持左键、右键、双击事件* @returns 清理函数*/function useEvents(dom, { leftClick, rightClick, dblClick }) {let dblclick = false;let prevPageX = 0;let prevPageY = 0;function handle(event) {if (event.type === 'mousedown') {prevPageX = event.pageX;prevPageY = event.pageY;return;} else if (event.type === 'dblclick') {dblclick = true;setTimeout(() => (dblclick = false), 300);dblClick && dblClick(event);} else {if (prevPageX !== event.pageX || prevPageY !== event.pageY) {return;}if (event.button === 2) {rightClick && rightClick(event);} else {if (dblclick) return;leftClick && leftClick(event);}}}const _handle = useDebounce(handle, 300, false); //函数防抖，消除高频率操作下的重复事件dom.addEventListener('dblclick', handle, false);dom.addEventListener('mousedown', handle, false);dom.addEventListener('mouseup', _handle, false);return () => {dom.removeEventListener('dblclick', handle, false);dom.removeEventListener('mousedown', handle, false);dom.removeEventListener('mouseup', _handle, false);};}

javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化相关推荐

html 左键右键双击事件,dblclick()
dblclick() 为JavaScript 的"dblclick"事件绑定一个处理函数,或者触发元素上的"dblclick"事件..dblclick(hand ...
html 左键右键双击事件,html中在鼠标双击元素时触发的事件属性ondblclick
实例Copy Text 浏览器支持 IE Firefox Chrome Safari Opera 所有主流浏览器都支持 ondblclick 属性. 定义和用法 ondblclick 属性在鼠标双击元 ...
【Fungus笔记】No.3：与 Sprite(精灵) 交互，Click(点击) or Drag(拖拽)
当Block(段落)的响应事件为Sprite类时,可以通过跟Sprite(精灵)的交互来执行指令. 交互行为包括拖拽和点击两种. 首先是 Object Clicked(点击). 设置为点击事件后,它要 ...
pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端移动端在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.阻止事件冒泡和默认行为二.拖拽 1, 实现拖拽相关的三大事件: 2, 实现拖拽思路: 1, 给目标元素添加onmous ...
JavaScript中的拖拽事件且限制出界
JavaScript中的拖拽事件限制出界 JavaScript事件中很多都会用到拖拽,而在现实中很多拖拽是会限制在浏览器界面禁止出界的,下面是封装好的限制出界的拖拽事件. function drag( ...
android 9.0 10.0 上报鼠标左键右键给app调用
在进行TV定制化开发时,客户需要系统上报鼠标左键右键给app做处理也就是 KEYCODE_META_LEFT 和 KEYCODE_META_RIGHT这两个事件首选需要在 KeyEvent.jav ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
511遇见易语言大漠模块制作鼠标左键右键单击双击
本机视频封装的命令是大漠键鼠中的以下命令:LeftClick().LeftDoubleClick().LeftDown().LeftUp().MiddleClick().MiddleDown().Mi ...

javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化

javascript event click/dblclick left/right区分左键、右键、双击事件，排除点击事件与拖拽事件冲突，做防抖优化相关推荐

最新文章

热门文章