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会自动将焦点返回到关闭时的按钮。

示例（Live）：

$(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中尝试了这个并且它有效，空格键不再打开模态。

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

4 个答案:

示例（Live）：