javascript - 模态关闭后返回焦点

Question

我正在使用Venobox modal并需要 ADA 支持。我已经调整了一些东西以使其正常工作，但我还需要一件。我需要集中注意力返回到按下关闭按钮时打开模式的元素 a.venobox。

换句话说，如果用户仅通过 Tab 键浏览网站，打开模式，然后关闭它，然后再次按 Tab 键，它将从他们离开的地方继续。

我尝试插入 tabindex 但它仅适用于第一个选项卡，然后跳回页面顶部。然后，我尝试添加一些东西来保持焦点，然后在关闭时返回它，但我不是最擅长 js 的。

谢谢

我当前的代码:

$(document).ready(function(){
  $('.venobox').venobox().click(function() {    
    $('.vbox-close').attr('tabindex', '1').attr('title','Close Modal');

    var focusReturn = $(this).focus();    
    $(".vbox-close").click(function(){
      return focusReturn;
    });

  });
});

Answer 1

设置var focusReturn = $(this).focus();只会将您的自定义变量设置为焦点函数的返回值(which is the element it was called on) 。此外，the return value in an event handler is only used to prevent default event propagation.

您可能想要做的是 var focusReturn = $(this).focus;，然后在 click- 内使用 focusReturn(); 调用它处理程序。但是，我建议不要这样做，因为它是解决非功能性问题的功能性方法。而且用 JavaScript 等非函数式语言编写函数式代码很难阅读。

但是，有一种更常见(也更符合常识)的方法可以做到这一点:

// don't need this line // var focusReturn = $(this).focus();    
$(".vbox-close").click($.proxy(function() {
  $(this).focus();
}, this));

jQuery's proxy function用于更改函数执行的闭包上下文。

(可能)改进此问题的另一种方法是将该事件处理程序放置在 .vbox-close 上的 close 事件上，但我对此不够熟悉插件以了解它支持哪些事件。不过，这当然值得研究，因为对话框可能可以通过更多方式关闭，而不仅仅是单击关闭按钮。