js按住空格+鼠标左键移动位置？

Question

https://codepen.io/wangshaoji...

怎么实现空格+鼠标点击红色背景的区域移动位置，就相当与托横向滚动条和纵向滚动条的效果那样

Answer 1

可以监听 mousedown + mousemove + mouseup 三个鼠标事件实现

下面是 ctrl + 左键长按 进入移动模式的参考写法（移动时可松开 ctrl）

const scrollElement = document.querySelector('.wrap')

let curScrollElement = null

scrollElement.addEventListener('mousedown', function(e) {
  if (e.ctrlKey && e.button === 0) {
    e.preventDefault()
    curScrollElement = this
  }
})

addEventListener('mousemove', function(e) {
  curScrollElement?.scrollBy(-e.movementX, -e.movementY)
})

addEventListener('mouseup', function() {
  curScrollElement = null
})

---

下面是 空格 + 左键长按 进入移动模式的参考写法（移动时可松开 空格）

const scrollElement = document.querySelector('.wrap')

let curScrollElement = null
let holdSpace = false

scrollElement.addEventListener('mousedown', function(e) {
  if (holdSpace && e.button == 0) {
    e.preventDefault()
    curScrollElement = this
  }
})

addEventListener('mousemove', function(e) {
  curScrollElement?.scrollBy(-e.movementX, -e.movementY)
})

addEventListener('mouseup', function() {
  curScrollElement = null
})

addEventListener('keydown', function(e) {
  if (holdSpace = e.code == 'Space') {
    e.preventDefault()
  }
})

addEventListener('keyup', function() {
  holdSpace = false
})

Answer 2

鼠标事件都有一个 ctrlKey 属性，读取这个属性可以得知 Ctrl 键是否有被按下。

Answer 3

const tapTime = 2000;
const dom = document.querySelector(".wrap");
let start, end;

function mousemove(e) {
  end = Date.now();
  if (end - start > tapTime) {
    dom.scrollBy(-e.movementX, -e.movementY);
  }
}

function mousedown(e) {
  e.preventDefault();
  if (e.ctrlKey) {
    start = Date.now();
    dom.addEventListener("mousemove", mousemove);
  }
}

function mouseup(e) {
  dom.removeEventListener("mousemove", mousemove);
}

dom.addEventListener("mousedown", mousedown);
dom.addEventListener("mouseup", mouseup);

长按时间可以修改tapTime毫秒,https://codepen.io/easy-marti...