jQuery事件触发器在注释和seadragon上不起作用

Question

我正在尝试使用jQuery自动触发向下箭头键事件。注解/seadragon组合有一个侦听器，当我按下向下箭头时，它会打开所有预配置的标记。

我已经编写了jQuery代码来查找输入字段，将焦点放在该字段上，然后触发keyup事件。

    function triggerDownArrowOnInput() {
        $("[id^=downshift][id$=input]").each(function(index) {
            // There should only be 1, but let's not assume.
            console.log(index);
            if (index == 0) {
                console.log("Found an input: " + $(this).attr("id"))
                $(this).focus();
                var event = jQuery.Event("keyup");
                event.keyCode = event.which = 40; // down arrow
                $(this).trigger(event);
            } else {
                console.log("Multiple elements found that match the id: " + $(this).attr("id"));
            } // if
        })
    } // triggerDownArrowOnInput

焦点工作得很好，但不是导火索。如果我手动点击向下箭头键，则所有预配置的标记都会出现：

​

​

我已经分别试过"keyCode“和"which”了。

我已经尝试触发$(This).keyup(事件)。

我已经尝试在焦点调用和触发器/按键调用之间设置一个延迟。

我尝试调用$(Document)事件(.trigger)。

我认为我可能将事件发送到了错误的元素，但似乎(通过Dev工具)只有输入字段和文档启用了侦听器。

无论我做什么，我都不能让事件触发。有什么想法吗？

谢谢。

Answer 1

我想我可以在没有jQuery的情况下，使用KeyboardEvent和dispatchEvent来完成这个任务。在我的测试中，我认为你不需要事先获得焦点，因为它是元素上的一个事件，但值得在你的应用程序上进行测试。

function triggerDownArrowOnInput() {
    $("[id^=downshift][id$=input]").each(function(index) {
        // There should only be 1, but let's not assume.
        console.log(index);
        if (index == 0) {
            console.log("Found an input: " + $(this).attr("id"))
            $(this).focus();
            this.dispatchEvent(new KeyboardEvent('keyup',{'keyCode': 40, 'key':'ArrowDown', 'code':'ArrowDown'}));
        } else {
            console.log("Multiple elements found that match the id: " + $(this).attr("id"));
        }
    })
}

Answer 2

你试过keydown吗？

var e = jQuery.Event("keydown");
e.which = 40;
e.keyCode = 40
$(this).trigger(e);

​

function triggerDownArrowOnInput() {
    $("[id^=downshift][id$=input]").each(function(index) {
        // There should only be 1, but let's not assume.
        console.log(index);
        if (index == 0) {
            console.log("Found an input: " + $(this).attr("id"))
            $(this).focus();
            var event = jQuery.Event("keydown");
            event.keyCode = event.which = 40;
            $(this).trigger(event);
        } else {
            console.log("Multiple elements found that match the id: " + $(this).attr("id"));
        }
    })
} // triggerDownArrowOnInput

​

Answer 3

我能够让事件触发，但仍然无法打开focus菜单。我最终不得不为以下内容创建一个开发环境：

recogito/recogito-client-core
recogito/recogito-js
recogito/annotorious
recogito/annotorious-openseadragon

然后，我修改了recogito/recogito-client- Autocomplete.jsx中的核心，添加了一个OnFocus侦听器，然后添加了以下代码：

const onFocus = evt => {
    if (!isOpen) {
        this.setState({ inputItems: this.props.vocabulary }); // Show all options on focus
        openMenu()
    } // if
} // onFocus

比我想做的要多得多，但它现在起作用了。