Fokus auf ein div setzen, wenn eines der Inhaltselemente angeklickt wird

Question

Ich benutze das Folgende, um den Fokus auf ein div zu setzen, wenn darauf geklickt oder ein Tab angeklickt wird.

Es funktioniert nur, wenn ich auf den Padding-Bereich im Div klicken.

Wenn Sie auf eines der untergeordneten Elemente klicken, wird der div: focus nicht aktiviert.

Bitte wie kann ich das beheben?

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> 

einige Anmerkungen:

1) gibt es mehrere .sidebar-message Reihen (DIVs), und nur sollte man hervorgehoben zu einer Zeit

2) Die Liste der .sidebar-message DIVs ist nicht verfügbar @ DocumentReady, sie wird verfügbar, wenn eine XHR-Anforderung Daten zurückgibt, die über Lenker in eine Vorlage eingegeben werden sollen. Einer der Kommentare vorgeschlagen späte Bindung runden dieses Sie

Answer 1

Dadurch wird dem Container eine neue Klasse hinzugefügt, wenn einer der untergeordneten Objekte den Fokus erhält.

Hinweis: Die hinzugefügte Klasse wird in diesem Beispiel nicht entfernt, sobald sie festgelegt wurde. Wenn Sie die focused Klasse entfernen möchten, wenn der Benutzer irgendwo anders klickt, empfehle ich Ihnen, einen Handler für focusout() entsprechend zu implementieren. Ein weiterer Hinweis: Ich würde empfehlen, auf dem Container-Element .focus() aufrufen (wie in zwei der anderen Antworten vorgeschlagen), da dies den Fokus von Ihrem Kind Elemente stehlen könnte, die wiederum mit der Benutzerfreundlichkeit, vor allem wenn Sie planen, dem Container Eingabeelemente hinzuzufügen.

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

bekommen kann dieser es wie haben

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

Answer 3

Versuchen:

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>

Arbeiten in Chrome. Havent hat in anderen Browsern getestet.

Answer 4

Sie können dieses Ereignis unter Verwendung der auf Klick mit JQuery tun und das Click-Ereignis aus. Überprüfen Sie unten.

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

Lassen Sie uns Ihre alten HTML verwenden.

So wird die JQuery

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