Question

我尝试模拟WASD在智能手机上移动。当我点击智能手机上的按钮时，它会触发该按钮但不会停止。

如何在释放按钮时告诉程序停止？是否需要使用keyup或者有更好的想法？

function fireKey(el, key) {
    if (document.createEventObject) {
        var eventObj = document.createEventObject();
        eventObj.keyCode = key;
        el.fireEvent("onkeydown", eventObj);   
    } else if (document.createEvent) {
        var eventObj = document.createEvent("Events");
        eventObj.initEvent("keydown", true, true);
        eventObj.which = key;
        eventObj.keyCode = key;
        el.dispatchEvent(eventObj);
    }
}

这会触发按钮：

            <paper-button  data-key="LEFT" on-down="handleButton">
                <iron-icon data-key="LEFT" icon="hardware:keyboard-arrow-left" style="color: white;"></iron-icon>
            </paper-button>
            <paper-button  data-key="RIGHT" on-down="handleButton">
                <iron-icon data-key="RIGHT" icon="hardware:keyboard-arrow-right" style="color: white;"></iron-icon>
            </paper-button> <br/>

            <paper-button data-key="DOWN" on-down="handleButton">
                <iron-icon data-key="DOWN" icon="hardware:keyboard-arrow-down" style="color: white;"></iron-icon>
            </paper-button>

It's from this example.

Answer 1

我无法确定您的HTML是如何更改的，因为您没有包含有关如何将您的on-down属性挂钩到事件处理程序的信息 - 看起来这必须是某种Javascript框架。

但问题显然是，您有一个事件告诉您的密钥是按，但是您没有告诉密钥是已发布再次，所以一旦你按下按钮，你的浏览器基本上就会认为钥匙永远被按下了。

解决方案看起来像这样，但我再也无法测试这个：

function pressKey(el, key) {
    fireKeyEvent(el, key, "keydown");
}

function releaseKey(el, key) {
    fireKeyEvent(el, key, "keyup"
}

function fireKeyEvent(el, key, eventName) {
    if (document.createEventObject) {
        var eventObj = document.createEventObject();
        eventObj.keyCode = key;
        el.fireEvent("on" + eventName, eventObj);   
    } else if (document.createEvent) {
        var eventObj = document.createEvent("Events");
        eventObj.initEvent(eventName, true, true);
        eventObj.which = key;
        eventObj.keyCode = key;
        el.dispatchEvent(eventObj);
    }
}

<paper-button  data-key="LEFT" on-down="pressKey" on-up="releaseKey">
    <iron-icon data-key="LEFT" icon="hardware:keyboard-arrow-left" style="color: white;"></iron-icon>
</paper-button>
<!-- ... -->

因此，假设您的框架支持的on-up属性与on-down的工作方式相同。按下按钮时会触发keydown事件，再次释放按钮时会触发keyup事件。

模拟单击键不起作用

1 个答案: