CSS3 Schalter im klickbaren Element

Ich habe folgende html:CSS3 Schalter im klickbaren Element

<li class="list-group-item li-tab-1"> 
    <div class="list-group-item-desc" data-target="#tab-1" data-toggle="tab"> 
     <strong>1</strong> 
     <div class="small m-t-xs"> 
      <p>Description</p> 
     </div> 
     <div class="onoffswitch"> 
      <input type="checkbox" checked="checked" class="onoffswitch-checkbox" id="tab-1-enabled" /> <label class="onoffswitch-label" for="tab-1-enabled"> <span 
       class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> 
      </label> 
     </div> 
    </div> 
</li>

Dies ist eine Registerkarte Bootstrap. .onoffswitch ist ein CSS3-Schalter.

Ich versuche, die gesamte <li> klickbar zu machen, um #tab-1 als Tab-Inhalt anzuzeigen. Ich kann dies tun, indem ich einen <div> mit den Attributen data-target und data-toggle definiere. Das funktioniert - wenn ich auf den div klicke, wird der Tab angezeigt.

Allerdings ist innerhalb der <li> ein CSS3-Schalter eingebettet. Ich möchte das unabhängig von der anklickbaren div funktionieren.

Dies ist ähnlich wie Links inside of larger clickable areas (CSS Only), außer dass die geschachtelten anklickbaren Elemente CSS3-Schalter anstelle von Ankern sind.

Mit dem Schalter CSS3 außerhalb des Ankers funktioniert gut.

Ich habe versucht, die tatsächliche ausgeblendete Checkbox sichtbar zu machen, das CSS3-Styling zu entfernen und darauf zu klicken. Das funktioniert funktioniert, so ist dies mit CSS3 verwandt?

Ich fragte mich, ob dies mit propogation zusammenhängt - das Problem ist, dass, wenn ich einen Ereignis-Listener für control.select oder ich bekomme keine Ereignisse - nur die div click-Ereignis.

Quelle

2016-09-26 Dan Gravell

[Event.stopPropagation()] (https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) könnte Ihr Problem lösen. Sie möchten die Weiterleitung nach der Umschaltung stoppen, damit das Ereignis nicht auf die Verbindung weiterläuft. (Das ist, wenn ich Sie richtig verstanden habe) – TW80000

Wenn der CSS3-Schalter angezeigt wird, scheint das Ereignis, das Kontrollkästchen anzuklicken, überhaupt nicht auf, nur wenn die hübschen Bits CSS3 entfernt werden und die wird funktioniert. Ich werde eine Klarstellung hinzufügen. –

Ihr HTML ist ungültig. * Das Element 'input' darf nicht als Nachkomme des 'a'-Elements erscheinen. * – Quentin

Es stellte sich heraus, dass es war das Problem (Danke @ TW80000).

$(".list-group-item-desc").click(function(ev) { 
    var isSwitchClick = $('.onoffswitch').has($(ev.target)).length > 0; 
    if(isSwitchClick) { 
     ev.stopPropagation(); 
    } 
});

Das prüft, ob der Klick innerhalb des Schalters war, und wenn ja, stoppt die Verbreitung.

In Wirklichkeit habe ich seit der Bootstrap Registerkarte Attrtributes in die <li> verschoben, aber ich denke, beide Ansätze sollten funktionieren, um das Schlucken des Ereignisses zu vermeiden.

Quelle

2016-09-29 15:40:42

CSS3 Schalter im klickbaren Element

Antwort

Verwandte Themen