javascript - 单击任何内容元素时将焦点设置到 div

Question

我使用以下代码在单击或切换到 div 时将焦点设置到它。

它只有在我点击 div 内的填充区域时才有效。

点击任何子元素都不会激活 div:focus。

请问我该如何解决这个问题？

CSS

.sidebar-message:link {
}

.sidebar-message:visited {
}

.sidebar-message:hover {
    background-color: lightyellow !important;
    outline-width: 0 !important;
}

.sidebar-message:focus {
    background-color: khaki !important;
    outline-width: 0 !important;
}

HTML

<div class="sidebar-message" tabindex="-1">
     <a href="#" id="pending_{{id}}" data-id="{{id}}">
     <div class="pull-left text-center">
         <img alt="image" class="img-circle message-avatar" src="media/profile-pics/{{uid}}.jpg">
     </div>
     <div class="media-body">
          <strong>{{{contact_name}}}</strong>
          <span class="badge {{color}} pull-right{{hidden}}">{{unread}}</span>
          <br>
          <small class="text-muted">{{formatDate last_seen 'dddd, MMMM Do h:mm:ss a'}}</small>
          <small class="pull-right">{{agent_name}}</small>
     </div>
     </a>
</div>

一些注意事项:

1) 有多个 .sidebar-message 行(DIV)，一次只应突出显示一个

2) .sidebar-message DIV 列表在@DocumentReady 中不可用，当 XHR 请求返回要通过 Handlebars 填充到模板中的数据时，它变得可用。其中一条评论建议后期绑定(bind)来解决这个问题

Answer 1

这将在任何子元素获得焦点时向容器添加一个新类。

注意:在这个例子中添加的类一旦设置就不会被删除。如果你想在用户点击其他地方时删除 focused 类，我建议你相应地为 focusout() 实现一个处理程序。

另一个注意事项:我建议再次调用容器元素上的 .focus() (如其他两个答案中所建议的那样)，因为这可能会从您的子元素中窃取焦点，这在turn 可能会影响可用性，尤其是当您计划向容器中添加输入元素时。

$(document).ready(function() {
  // use the following line to bind a focus handler to existing elements:
  // $(".sidebar-message *").on('focus', function() { 
  // use the following line for late binding (dynamically created elements):
  $(document).on("focus", ".sidebar-message *", function() {
    // remove class from all .sidebar-message elements
    $(".sidebar-message").removeClass("focused");
    // add class to nearest .sidebar-message element
    $(this).closest(".sidebar-message").addClass("focused");
  });
});

.sidebar-message:link {
}

.sidebar-message:visited {
}

.sidebar-message:hover {
background-color: lightyellow !important;
outline-width: 0 !important;
}

.focused.sidebar-message:hover,
.focused {
background-color: khaki !important;
outline-width: 0 !important;
}

.sidebar-message:focus {
background-color: khaki !important;
outline-width: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sidebar-message" tabindex="-1">
  <a href="#" id="pending_{{id}}" data-id="{{id}}">
    <div class="pull-left text-center">
      <img alt="image" class="img-circle message-avatar" src="media/profile-pics/{{uid}}.jpg">
    </div>
    <div class="media-body">
      <strong>{{{contact_name}}}</strong>
      <span class="badge {{color}} pull-right{{hidden}}">{{unread}}</span>
      <br>
      <small class="text-muted">{{formatDate last_seen 'dddd, MMMM Do h:mm:ss a'}}</small>
      <small class="pull-right">{{agent_name}}</small>
    </div>
  </a>
</div>

<hr>

<div class="sidebar-message" tabindex="-1">
  <a href="#" id="pending_{{id}}" data-id="{{id}}">
    <div class="pull-left text-center">
      <img alt="image" class="img-circle message-avatar" src="media/profile-pics/{{uid}}.jpg">
    </div>
    <div class="media-body">
      <strong>{{{contact_name}}}</strong>
      <span class="badge {{color}} pull-right{{hidden}}">{{unread}}</span>
      <br>
      <small class="text-muted">{{formatDate last_seen 'dddd, MMMM Do h:mm:ss a'}}</small>
      <small class="pull-right">{{agent_name}}</small>
    </div>
  </a>
</div>