为漫游车控制功能添加键盘keydown/keyup事件实现方案

嘿，我已经帮你搞定了把现有漫游车控制函数整合到键盘事件的问题，直接用下面的代码就能实现W键按下前进、松开停止的功能，完全兼容你原来的按钮控制逻辑：

核心逻辑 #

把你已经写好的functForward()（前进）和functStopDrive()（停止）函数，分别绑定到全局的keydown（按键按下）和keyup（按键松开）事件上，同时做了浏览器兼容性处理，确保代码在不同环境下都能正常运行。

完整代码实现 #

JavaScript 控制部分

// 前进控制函数：发送前进指令到漫游车
function functForward() {
    var myRPM = document.getElementById('slider').value;
    var myAng = document.getElementById('slider2').value;
    
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    
    var request = "?drive=1" + "&rpm=" + myRPM + "&ang=" + myAng;
    console.log(request);
    xhttp.open("GET", request, true);
    xhttp.send();
}

// 停止控制函数：发送停止指令到漫游车
function functStopDrive() {
    var myRPM = document.getElementById('slider').value;
    var myAng = document.getElementById('slider2').value;
    
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    
    var request = "?drive=0" + "&rpm=" + myRPM + "&ang=" + myAng;
    console.log(request);
    xhttp.open("GET", request, true);
    xhttp.send();
}

// 兼容多浏览器的事件绑定工具函数
var addEvent = document.addEventListener ? 
    function(target, type, action) {
        if (target) {
            target.addEventListener(type, action, false);
        }
    } : 
    function(target, type, action) {
        if (target) {
            target.attachEvent('on' + type, action, false);
        }
    };

// 绑定W键按下事件：触发前进
addEvent(document, 'keydown', function(e) {
    e = e || window.event;
    var key = e.which || e.keyCode;
    if (key === 87) { // 87是W键的键盘码
        functForward();
    }
});

// 绑定W键松开事件：触发停止
addEvent(document, 'keyup', function(e) {
    e = e || window.event;
    var key = e.which || e.keyCode;
    if (key === 87) {
        functStopDrive();
    }
});

HTML 界面部分

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-sm-4">
    <button id="Forward" type="button" class="btn btn-success btn-lg btn-block" 
            ng-mousedown="functForward();" ng-mouseup="functStopDrive();">
        Forward
    </button>
</div>
<div id="slidecontainer">
    <input type="range" ng-model="myRPM" min="0" max="8000" id="slider" step="500">
    <input type="range" ng-model="myAng" min="-60" max="60" id="slider2" step="5">
</div>

关键说明 #

• 兼容性处理：addEvent函数同时支持现代浏览器的addEventListener和旧IE的attachEvent，避免了浏览器兼容问题
• 键盘事件对应：W键的键盘码是87，检测到该按键的keydown事件时调用前进函数，keyup事件时调用停止函数，和按钮的ng-mousedown/ng-mouseup逻辑完全一致
• 保留原有功能：原有的按钮控制逻辑没有改动，现在你既可以用鼠标点击按钮，也可以用W键来控制漫游车

内容的提问来源于stack exchange，提问作者Zen_Master