javascript - 更改 "active"面板的 Bootstrap 面板 CSS 类(单击/聚焦)

Question

我有一个包含多个 Bootstrap 面板的页面，我想让它只有“事件”面板具有 panel-primary 类(因此，在某种意义上突出显示)。在这种情况下，“事件”的定义是用户单击了面板内的任意位置或使用键盘或其他方式更改了焦点。

所以，我从这个开始:

function highlightActivePanel($activePanel) {
    $('.panel-primary').toggleClass('panel-primary panel-default');
    $activePanel.toggleClass('panel-default panel-primary');
}

$(document).on('click', '.panel-default', function () {
    highlightActivePanel($(this));
});

问题是，我在面板中有一个带有 jquery DataTables 插件的表。因此，如果我注册 click 事件，它通常会起作用，但当您由于某种原因单击面板底部的 DataTables 分页编号按钮时，它不会起作用。点击甚至不会触发。我猜可能是由于 DT 自己的点击事件。

所以，我尝试了 focus 事件:

$(document).on('focus', '.panel-default', function () {
    highlightActivePanel($(this));
});

...单击 DataTables 按钮和字段效果更好，但如果用户只是单击面板内的文本(或表格单元格中)则不起作用。

最后，如果我只是简单地注册两个事件监听器，它似乎可以工作，但我想知道这是否明智，或者是否有更好/更干净的方法来做到这一点？

$(document).on('click', '.panel-default', function () {
    highlightActivePanel($(this));
});
$(document).on('focus', '.panel-default', function () {
    highlightActivePanel($(this));
});

这是一个JsFiddle这更好地说明了我在说什么。

<小时/>

编辑:刚刚意识到我可以轻松地将这两个事件结合起来，如下所示:

$(document).on('click focus', '.panel-default', function () {
    highlightActivePanel($(this));
});

但是如果还有更好的方法，请告诉我。

Answer 1

单击 DataTables 分页号码 triggers page.dt，因此您可以使用 click page.dt 代替 click focus 以避免可能将焦点丢失到页面上的其他内容(尽管您也可以通过使用更具体的选择器来做到这一点)。