Question

当点击或标记为div时，我使用以下内容将焦点设置为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）{DocumentReady> .sidebar-message DIV列表不可用，当XHR请求返回要通过把手填充到模板中的数据时，它变为可用。其中一条评论建议迟到以解决这个问题

Answer 1

当任何子节点获得焦点时，这将向容器添加新类。

注意：添加的类在设置后不会在此示例中删除。如果您想在用户点击其他位置时删除focused课程，我建议您相应地为focusout()实施处理程序。

另一个注意事项：我建议再次在容器元素上调用.focus()（正如其他两个答案中所建议的那样），因为这可能会从您的子元素中窃取焦点，这反过来又会影响可用性，特别是如果你在向容器添加输入元素时刨平。

＆＃13;

$(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");
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以这样做

$("div.sidebar-message *").click(function(e){
  $(this).parentsUntil(".sidebar-message").focus();
});

Answer 3

尝试：

＆＃13;

var sidebarMessage = document.getElementsByClassName("sidebar-message")[0];
sidebarMessage.addEventListener('click',function(e){
sidebarMessage.focus();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

适用于Chrome。没有在其他浏览器中测试过。

Answer 4

您可以使用on click事件和off click事件使用JQuery执行此操作。检查下面。

<强> CSS

＆＃13;

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

＆＃13;

<强> HTML

让我们使用旧的HTML。

所以JQuery将是

＆＃13;

$(function() {
  $('div.sidebar-message').on('click', function() {
   $(this).addClass('sidebar-message-clicked'); 
  }).off('click', function() {
   $(this).removeClass('sidebar-message-clicked');
  });
});

＆＃13;

当点击任何内容元素时，将焦点设置为div

4 个答案: