主干：“ keypress”事件處理程序取決於div的tabindex嗎？

Question

我有一個包含Bootstrap模態的Backbone視圖。 在這種情況下，我試圖使Esc鍵關閉模式，但它是否起作用，似乎取決於<div>的tabindex屬性的存在：

var ModalView = Backbone.View.extend({
    el: '#modalOverlay', // is an existing container for modals

    events: {
        'keypress': function(event) { ... }
    },

    initialize: function(options) {
        // the view pattern
        this.compiledTemplate = Handlebars.compile(yesNoQuestionAlertTemplate);
        this.options = options;
        this.render(options);
    },
});

yesNoQuestionAlertTemplate包含tabindex屬性，該屬性定義了轉義鍵的正確處理。 當我刪除屬性時，轉義不起作用，當我放回屬性時，將正確觸發處理程序。

<div id="yesNoQuestion" class="modal large" tabindex="-1" aria-hidden="true">
     <!-- modal definition -->
</div>

為什么存在這種奇怪的依賴關系？

Answer 1

keypress事件的目標只能是可以具有焦點的元素。 輸入元素默認可以具有焦點。 為了使其他任何HTML元素都具有焦點，您需要為其分配一個tabindex屬性。

當一個元素成為焦點時，事件就會在DOM上冒出，並在所有父元素上觸發。 因此，您必須選擇：

• 您應該為元素分配tabindex屬性。
• 因為它們是所有元素的父項，所以可以在body或window上捕獲事件。