Javascript 一些关键事件会阻止其他事件的发生

首先，这是我正在研究的实时应用程序：

我是用VueJS制作的，但是，我相信这个问题与Vue无关

问题： 除了试着弹奏某些音符组合（例如，试着弹奏Q、W和2键）外，所有这些都可以很好地工作。你会注意到最后一个音符没有播放，甚至没有显示为按下，而你可以同时播放Q、W、E、R和Y。所以它似乎不像我之前想的那样有一个极限

代码：我正在使用vue按键轻松地全局处理关键事件

模板部件

<template>
    <div id="app">
        <h1>Basic oscillator test</h1>
        <label for="waveType">Choose a wave type:</label>

        <select
            name="waveType"
            id="waveType"
            v-model="wave"
        >
            <option value="sine">sine</option>
            <option value="square">square</option>
            <option value="triangle">triangle</option>
            <option value="sawtooth">sawtooth</option>
        </select>

        <hr>

        <ul class="keyboard">
            <li
                v-for="note in testBoard"
                :key="note.id"
                :class="[note.class, getKeyByValue(testBoard, note).charAt(0), {'pressed': pressedNotes.includes(note.freq)}]"
                @mousedown="playSound(note.freq, 1)"
            >
                <p>{{getKeyByValue(testBoard, note).replace('s', '#')}}</p>
                <p>{{String.fromCharCode(note.keycode)}}</p>
            </li>
        </ul>

        <Keypress
            v-for="note in testBoard"
            :key="note.id"
            key-event="keydown"
            :key-code="note.keycode"
            @success="playSound(note.freq)"
        />
        <Keypress
            v-for="note in testBoard"
            :key="note.id"
            key-event="keyup"
            :key-code="note.keycode"
            @success="removeNote(note.freq)"
        />
    </div>
</template>

我也试过其他人用vue或其他技术制造的钢琴，但总有类似的问题。 我可能错过了一些重要的东西，谁知道呢，但我找不到我需要的信息

---

非常感谢

您的代码没有问题，您也无法修复它-这是许多键盘的硬件限制

首先，将键盘想象成一个矩形网格（换句话说，1、Q、a和Z位于同一列中，尽管它们通常不直接位于彼此之上）

限制是不能同时识别构成矩形三个角的三个关键点。如果在行中按住两个键，则第三个键不能与前两个键中的任何一个位于同一列中。如果在一列中按住两个键，则第三个键不能与前两个键中的任何一个位于同一行。如果按住Q和Z键，则行上以A开头的任何键都可以正常工作，但W、E、X、C等都将被锁定

或者，有些机器可能会在矩形的第四个角给你“幽灵”按键——按住Q和Z并按下E将为E注册一个按键，但同时也为C注册一个按键，即使没有人按下C

---

所有这些都与电子键盘的制造方式有关，而在软件中你对此无能为力。有些键盘没有这个限制，但你不能指望你的用户拥有它们。

欢迎使用Stack Overflow！这样做的方式，你的整个问题（包括任何必要的代码）必须在你的问题中，而不仅仅是链接。原因有两个：人们不应该非得去场外帮助你；链接腐烂，使问题及其答案对未来的人们毫无用处。请在问题中加一个字母。更多信息：您确定这不是因为您在第一个

中返回
，如果
播放声音的
块中返回了
？是的，此块仅用于在按下键时防止重复播放同一音符。即使没有它，问题依然存在。啊，我明白了，谢谢你的迅速反应，祝你有一个愉快的一天！
<script>
import { noteValues, testBoard } from './assets/notevalues.js';
export default {
    name: 'App',
    data() {
        return {
            noteValues,
            testBoard,
            selectedNote: null,
            wave: 'sine',
            pressedNotes: [],
        }
    },
    components: {
        Keypress: () => import('vue-keypress')
    },
    methods: {
        getKeyByValue(object, value) {
            return Object.keys(object).find(key => object[key] === value);
        }
        ,
        playSound(note, clicked) {
            if (this.pressedNotes.includes(note)) {
                return;
            } else {
                this.pressedNotes.push(note);
                const context = new AudioContext();
                const o = context.createOscillator();
                const g = context.createGain();
                o.connect(g);
                g.connect(context.destination);
                o.type = this.wave;
                const frequency = note;
                o.frequency.value = frequency;
                o.start(0);
                o.stop(context.currentTime + 1)
                g.gain.exponentialRampToValueAtTime(
                    0.00001, context.currentTime + 2.5
                );
                setTimeout(() => {
                    context.close();
                }, 1000);
                if (clicked === 1) {
                    setTimeout(() => {
                        this.removeNote(note);
                    }, 50)
                }
            }
        },
        removeNote(note) {
            const index = this.pressedNotes.indexOf(note);
            if (index > -1) {
                this.pressedNotes.splice(index, 1);
            }
        }
    },
}
</script>

export let testBoard = {
  'C3': { keycode: 81, freq: 130.81, class: 'white' },
  'Cs3': { keycode: 50, freq: 138.59, class: 'black' },
  'D3': { keycode: 87, freq: 146.83, class: 'white' },
  'Ds3': { keycode: 51, freq: 155.56, class: 'black' },
  'E3': { keycode: 69, freq: 164.81, class: 'white' },
  'F3': { keycode: 82, freq: 174.61, class: 'white' },
  'Fs3': { keycode: 53, freq: 185.00, class: 'black' },
  'G3': { keycode: 84, freq: 196.00, class: 'white' },
  'Gs3': { keycode: 54, freq: 207.65, class: 'black' },
  'A3': { keycode: 89, freq: 220.00, class: 'white' },
  'As3': { keycode: 55, freq: 233.08, class: 'black' },
  'B3': { keycode: 85, freq: 246.94, class: 'white' },
  'C4': { keycode: 90, freq: 261.63, class: 'white' },
  'Cs4': { keycode: 83, freq: 277.18, class: 'black' },
  'D4': { keycode: 88, freq: 293.66, class: 'white' },
  'Ds4': { keycode: 68, freq: 311.13, class: 'black' },
  'E4': { keycode: 67, freq: 329.63, class: 'white' },
  'F4': { keycode: 86, freq: 349.23, class: 'white' },
  'Fs4': { keycode: 71, freq: 369.99, class: 'black' },
  'G4': { keycode: 66, freq: 392.00, class: 'white' },
  'Gs4': { keycode: 72, freq: 415.30, class: 'black' },
  'A4': { keycode: 78, freq: 440.00, class: 'white' },
  'As4': { keycode: 74, freq: 466.16, class: 'black' },
  'B4': { keycode: 77, freq: 493.88, class: 'white' }
}