如何在JAVASCRIPT中使用鼠标点击和键盘键组合在一起执行或调用任何函数?

问题描述 投票:0回答:2

我有一个函数,它是在点击一个按钮,即调用。

function print(){
alert("PRINT")
}

btn.addEventListener("click", print);

只要按钮被点击,这个函数就会被打印出来。但我想调用这个函数的组合键盘键+鼠标点击,即类似于(q+点击),即用户按下键盘的q键,并通过点击q沿鼠标点击。对于控制键,它可以很容易做到,但对于其他键,它可以如何做呢?

? "谢谢

javascript typescript mouseevent keyboard-events
2个回答
0
投票

如果你使用RxJS,那么你可以更容易地实现你想要的任务。

这是为你的任务编写的代码。

import { of, fromEvent, merge } from 'rxjs'; 
import { map } from 'rxjs/operators';


const halloBtn = document.getElementById('hallo_btn');

const halloBtnClick$ = fromEvent(halloBtn, 'click');

const pressKey$ = fromEvent(document, 'keydown');

const keyUp$ = fromEvent(document, 'keyup');

let keydownFlag = false;

merge(
  halloBtnClick$,
  pressKey$,
  keyUp$
).subscribe(event => {
  if (event.type === 'keydown') {
    keydownFlag = true;
  }

  if (event.type === 'keyup') {
    console.log('key up ... ');
    keydownFlag = false;
  }

  if (keydownFlag && event.type === 'click') {
    alert('wow..');
    keydownFlag = false;
  }
})

0
投票

你应该为自己记录按下和释放的按键

"use strict";
console.clear()
{
  let keysPressed = {}
  
  const onKeyDown = e => {
    if (!e.repeat) {
      keysPressed[e.key] = true
    }
  }
  
  const onKeyUp = e => {
      delete keysPressed[e.key]
  }
  
  const onClick = e => {
    if (e.target.id == 'click-btn') {
      console.log('Keys pressed:', Object.keys(keysPressed).join(', '))
    }
  }
  
  document.addEventListener('click', onClick)
  document.addEventListener('keydown', onKeyDown)
  document.addEventListener('keyup', onKeyUp)
}
<button id="click-btn">Click</button>
© www.soinside.com 2019 - 2024. All rights reserved.