前端JavaScript中编写键盘事件的实战教学

document.addEventListener('keydown', function(e) {
    console.log(e.key);        // 按下的键，如 "a", "Enter", "ArrowLeft"
    console.log(e.code);       // 物理键位，如 "KeyA", "Space", "ArrowLeft"
    console.log(e.shiftKey);   // 是否同时按了Shift
});

document.addEventListener('keydown', function(e) {
    // 关键：避免在输入框中触发
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }

    switch (e.key) {
        case 'a':
        case 'A':
            e.preventDefault();
            left_handed();   // 左旋1°
            break;
        case 'd':
        case 'D':
            e.preventDefault();
            right_handed();  // 右旋1°
            break;
        case 'ArrowLeft':
            e.preventDefault();
            last_img();      // 上一张
            break;
        case 'ArrowRight':
            e.preventDefault();
            next_img();      // 下一张
            break;
        case 'Enter':
            e.preventDefault();
            identify();      // 识别
            break;
        case 's':
        case 'S':
            e.preventDefault();
            save_img();      // 保存
            break;
    }
});

document.addEventListener('wheel', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }

    e.preventDefault();  // 必须加，否则页面会跟着滚

    if (e.deltaY > 0) {
        next_img();      // 滚轮向下 → 下一张
    } else {
        last_img();      // 滚轮向上 → 上一张
    }
}, { passive: false });  // passive: false 是关键

if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
    return;
}