为什么模态弹出按下空格键？ 我该如何预防？

Question

我已计划在空格键单击上执行一项操作。 它确实发生了。

// when space bar is pressed
do-something; // Applied on the $(document).keypress..

但是，当我按下空格键时，连同必须触发的事件/动作一起，再次显示模态加载/。 为什么会这样呢？ 我试图防止再次加载模式：

$('#goal').on('hidden.bs.modal',function() {
            $(document).focus(); // Get the button that triggered modal
                                 // out of focus                            

});

但是文档并没有获得焦点，触发模态加载的按钮仍保持焦点，直到我单击屏幕将文档重新聚焦为止。 如何防止模式键再次按空格键加载？

我还尝试了触发模态的按钮上的blur()函数。 但这没有帮助吗？

Answer 1

使用$(document).focus(); 不会有任何效果，因为document不是可聚焦的元素，它实际上根本不是元素。 尝试使用document.activeElement来获取活动元素并将其blur 。

document.activeElement.blur();

为此，您将需要在模式关闭时监听事件hidden.bs.modal ，因为Bootstrap会自动将焦点返回到关闭时的按钮。

示例（ 实时 ）：

$(document).on('hidden.bs.modal', function() {
    document.activeElement.blur();
});

或者，您可以将焦点设置为模型本身中的可聚焦元素（如果存在）。 这可能会给用户带来最愉快的体验。

Answer 2

可能是由于默认情况下将重点放在可能导致此问题的元素上。 尝试过event.preventDefault（）; ？

// when space bar is pressed
event.preventDefault();
do-something; // Applied on the $(document).keypress..

Answer 3

如果没有看到更多的代码，或者甚至没有一个演示您问题的jsfiddle，这很难回答。

但总的来说，您可以通过从jquery事件处理函数中返回false来指示您已经使用了事件，从而防止空格键有任何副作用。

因此（猜测事件处理程序的外观）

$('...').keypress( function(event) {
  if ( event.which == 32 ) {
    doSomething();
    return false;
  }
});

希望这可以帮助。 如果没有，请提供更多细节。

Answer 4

您可以通过以下方式避免按钮获得焦点：

$('#yourButtonId').focus(function(){
  $(this).blur();
});

我在您发布的jsFiddle中进行了尝试，它可以正常工作，空格键不再打开模式。