當點擊任何內容元素時將焦點設置爲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行（資料覈實），只有一個應強調在時間

2）.sidebar-message DIV列表不可用@ DocumentReady，它在XHR請求返回數據以通過句柄填充到模板時變爲可用。其中一個意見建議後期綁定來克服這個

Answer 1

當任何孩子獲得焦點時，這將爲容器添加一個新類。

注意：添加的類在設置後不會被刪除。如果你想刪除focused類，如果用戶點擊其他地方，我建議你相應地實現focusout()的處理程序。

另一個說明：我會再次建議在容器元素上調用.focus()（如其他兩個答案中的建議），因爲這會從您的子元素中竊取焦點，這反過來可能會混淆可用性，特別是如果您正在將輸入元素添加到容器中。

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

Answer 2

你可以把它像這樣

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

Answer 3

嘗試：

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

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

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

作品在Chrome中。沒有在其他瀏覽器中測試過。

Answer 4

您可以通過使用上點擊事件和關閉的單擊事件使用jQuery做到這一點。在下面檢查。

CSS

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

HTML

讓我們使用舊的HTML。

所以jQuery將是

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