鼠标单击模拟JavaScript中的键盘键

时间:2014-01-23 09:21:12

标签: javascript javascript-events keyboard touch key-bindings

我的情况是在应用程序(HTML / XUL)中有一些功能键(F5,F7和F9)的键绑定,以便与其他应用程序通信。

现在我必须为同一个应用程序制作基于触摸的界面,没有键盘和高级触摸事件。所有触摸点击实际上与鼠标点击相同,我需要有3个按钮/链接,其行为与F5,F7和F9键。

不要问原因,我只能说我需要保留那些密钥绑定。

我可以在链接上指定鼠标点击,就像按下F键一样吗?

2 个答案:

答案 0 :(得分:2)

在杰克的回答中,大部分是解决方案,并且基于我给出了完整的答案,因为初学者一眼就不那么容易修改功能。 这是来自this thread

的修改函数
function simulateKeyPress(target, options) {
    var event = target.ownerDocument.createEvent('KeyEvents'),
        options = options || {};

    // Set your options or || default values
    var opts = {
        type: options.type                  || "keypress",
        bubbles: options.bubbles            || true,
        cancelable: options.cancelable      || true,
        viewArg: options.viewArg            || null,
        ctrlKeyArg: options.ctrlKeyArg      || false,
        altKeyArg: options.altKeyArg        || false,
        shiftKeyArg: options.shiftKeyArg    || false,
        metaKeyArg: options.metaKeyArg      || false,
        keyCodeArg: options.keyCodeArg      || 0,
        charCodeArg: options.charCodeArg    || 0
    }

    // Pass in the options
    event.initKeyEvent(
        opts.type,
        opts.bubbles,
        opts.cancelable,
        opts.viewArg,
        opts.ctrlKeyArg,
        opts.altKeyArg,
        opts.shiftKeyArg,
        opts.metaKeyArg,
        opts.keyCodeArg,
        opts.charCodeArg
    );

    // Fire the event
    target.dispatchEvent(event);
    event.stopPropagation;
}

现在我们在所需的元素/事件上调用它来按下所需的键。第二个参数是对象,所有选项都可以更改(在我的情况下,keyCodeArg:116只需要发送到模拟F5键按下)。

document.getElementById(element).addEventListener('click', function() {
    simulateKeyPress(this, {keyCodeArg: 116});
});

Mozilla开发者网络有关于KeyboardEventsinitKeyEvent的好文章。

答案 1 :(得分:1)

我猜有两种方法可以做到这一点。

简单的方法是让你的F键调用一个函数,并在捕获鼠标事件时简单地调用相同的函数。

另一种方法是捕获鼠标事件,然后触发F键按下事件。那么它几乎就是这个问题的重复:

How to simulate a mouse click using JavaScript?