Question

当用户在body的任何位置按Enter键时，它会触发另一个元素上的click事件，而该事件又会打开一个基本的警告弹出窗口（用于测试目的）。

这会创建一个循环，因为再次按Enter键将关闭警报，但会再次触发事件，打开新警报，并重复循环。

我在模态框脚本中使用它。当出现模态框时，用户可以按Enter键执行模式框内的按钮所执行的操作，例如关闭它（或者在我的情况下，打开警报弹出窗口）。

点击代码：

//Add click events...
button.bind('click', mybtn, function(e) {
    var click;

    if (e.data.onclick) {
        e.data.onclick(e);
    } else if (e.data.click) {
        e.data.click(e);
    }
});

关键代码：

//Add key events...
$('body').keyup(mybtn, function(e) {
    var keyCode = e.keyCode || e.which;

    //What key we need to match...
    switch (e.data.key) {
        case 'enter':
            if (keyCode == 13)          e.data.button.trigger('click');
            break;

        case 'esc':
        case 'escape':
            if (keyCode == 27)          e.data.button.trigger('click');
            break;
    }
});

我应该在不同的地方（元素）绑定我的事件吗？有没有更好的绑定方法来阻止这个循环？

我无法取消绑定关键事件，因为我的脚本需要足够灵活以处理多次按键操作。

创建模态框的示例：

createModal('HTML <b>content</b>', [{ label: 'Close', onclick: function() { alert('Modal closed'); }, key: 'enter' }]);

将HTML内容转储到模态中，然后该函数将遍历您定义的控件，并尝试为您构建它们。在此示例中，您定义了一个“关闭”控件，如下所示（如果您使用onclick=""）：

<button onclick="function() { alert('Modal closed'); }">Close</button>

将事件分配给文档，当您按Enter键时，将触发单击该按钮，从而导致问题。

Answer 1

button.one('click', mybtn, function(e) {
    var click;

    if (e.data.onclick) {
        e.data.onclick(e);
    } else if (e.data.click) {
        e.data.click(e);
    }
});

将click事件限制为仅一次出现，然后将其自行解除绑定。

绑定与警报弹出键输入键冲突

1 个答案: