js监听键盘+鼠标组合操作

您所在的位置:网站首页 js监听鼠标点击页面事件 js监听键盘+鼠标组合操作

js监听键盘+鼠标组合操作

2023-03-10 12:35| 来源: 网络整理| 查看: 265

  鉴于各种需求问题,有自己写了一个甘特图,比较简单,如果这个不符合大家需求,可以看看这个,代码可直接运行: https://www.cnblogs.com/pengfei-nie/p/13750505.html

  近期做一款甘特图的组件,想要实现 Ctrl + 滚轮  放大缩小甘特图时间最小刻度的功能,刚开始以为会有组合监听的办法,后来发现行不通,键盘和鼠标监听的方式不同。下面大致说一下实现方式。

1、按键监听:js无法做到同时监听,所以我们将监听按键的按下 、弹起状态,并保存。onkeydown  按下,将变量 ctrlDown  设置为 true,onkeyup  时设置为false,这里我监听的是Ctrl, 同理,如果想监听多按键,比如  Ctrl + Shift , 就设置2个变量,皆为true代表按下了。

2、鼠标监听: 我这里监听的是滚轮,当然左右击、双击、移入移出都是一样的做法,只需要对指定dom做事件监听即可,注意页面注销时,removeEventListener 解绑事件。在鼠标事件监听里面,判断键盘监听变量的值,true 代表正在按压状态。注意阻止浏览器的默认事件。

 

这样就实现了组合操作的监听,希望对你有帮助。ps:测试数据有些烂,见谅

export default { data() { return {}; }, methods: { // 监听 Ctrl + 滚轮,缩放甘特图 lisenScrol() { let w = this document.onkeydown = function(e) { console.log(e) if (e.keyCode === 17) w.ctrlDown = true }, document.onkeyup = function(e) { if (e.keyCode === 17) w.ctrlDown = false }, document.getElementsByClassName('c-gant')[0].addEventListener('mousewheel',(e) => { e.preventDefault(); if(w.ctrlDown) { let _newTimes = [] if(e.wheelDeltaY > 0) { // 放大 } else { // 缩小 } } },false); }, }, }

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3