js处理键盘事件时,鼠标响应延迟?

发布于 2022-09-02 09:46:42 字数 2661 浏览 6 评论 0

1.问题描述:three.js中第一人称操作器,在一些的电脑上面运行,可以单独响应键盘事件和鼠标事件,但是在响应键盘事件后,需要等待三十秒左右才能响应鼠标事件;如果在响应鼠标事件的情况下,可以响应键盘事件。
2.代码:

FirstPerson.prototype.bindEventListern = function(){

    this.domElement.addEventListener('mousedown', this._mousedown, false);
    this.domElement.addEventListener('mousemove', this._mousemove, false);
    this.domElement.addEventListener('mouseup', this._mouseup, false);
    window.addEventListener('keydown',this._keydown, false);
    window.addEventListener('keyup', this._keyup , false);

};
FirstPerson.prototype.onMouseDown = function(event){

    event.preventDefault();
    event.stopPropagation();

    this.isMoved = false;
    if(event.button === 0) {

        this.mouseX = event.pageX;
        this.mouseY = event.pageY;
        this.isRotateState = true;

    }

};

FirstPerson.prototype.onMouseMove = function(event){

    event.preventDefault();
    event.stopPropagation();

    if(event.movementX !== 0 || event.movementY !== 0) {

        this.isMoved = true;

    }else{
        this.yawAngle = 0;
        this.pitchAngle = 0;
    }
    if(this.isRotateState === true){

        document.body.style.cursor = 'move';
        this.yawAngle = event.pageX - this.mouseX;
        this.pitchAngle =  event.pageY - this.mouseY;

        this.mouseX = event.pageX;
        this.mouseY = event.pageY;
    }

};

FirstPerson.prototype.onMouseUp = function(event){

    event.preventDefault();
    event.stopPropagation();

    if(event.button === 0) {

        this.isRotateState = false;

    }
    document.body.style.cursor = 'default';

};

FirstPerson.prototype.onKeyDown = function(event){

    switch ( event.keyCode ) {

        case 38: /*up*/
        case 87: /*W*/
            this.moveForward = true;
            break;

        case 37: /*left*/
        case 65: /*A*/
            this.moveLeft = true;
            break;

        case 40: /*down*/
        case 83: /*S*/
            this.moveBackward = true;
            break;

        case 39: /*right*/
        case 68: /*D*/
            this.moveRight = true;
            break;
    }
};

FirstPerson.prototype.onKeyUp = function(event){

    switch ( event.keyCode ) {

        case 38: /*up*/
        case 87: /*W*/
            this.moveForward = false;
            break;

        case 37: /*left*/
        case 65: /*A*/
            this.moveLeft = false;
            break;

        case 40: /*down*/
        case 83: /*S*/
            this.moveBackward = false;
            break;

        case 39: /*right*/
        case 68: /*D*/
            this.moveRight = false;
            break;
    }
};

3.已尝试将事件放到同一个标签下,问题仍然存在,

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文