Warum das onclick-element wird ausgelöst, zweimal für das label-element

JS:

      window.onload = function(){
         var wow = document.getElementById("wow");
    	 wow.onclick = function(){
    	     alert("hi");
    	 }
      }

HTML:

    <label id="wow"><input type="checkbox" name="checkbox" value="value">Text</label>

Dies ist mein code, wenn ich klickte auf "Text" es wird gewarnt, Hallo zweimal, aber wenn ich klickte auf das Feld, die onclick element wird nur einmal ausgelöst, warum?

brauchen Sie den alert auf windows onload?
NÖ, wenn der text angeklickt wird

InformationsquelleAutor dramasea | 2014-07-01

html javascript

45

Beim klicken auf das label, es löst den click-handler, und Sie erhalten eine Warnung.

Aber einen Klick auf ein label auch automatisch sendet ein click-Ereignis an die zugehörige input-element, so wird dies behandelt wie ein Klick auf die checkbox. Dann Ereignis-bubbling bewirkt, dass das click-Ereignis ausgelöst, auf das enthaltende element, das das label, also der Prozedur erneut ausgeführt wird.

Wenn Sie Ihre HTML diese, werden Sie nicht die Doppel-Alarm:
```
<input id="wowcb" type="checkbox" name="checkbox" value="value">
<label id="wow" for="wowcb">Text</label>
```
Dem label ist jetzt im Zusammenhang mit der checkbox mit der for Attribut anstatt wickeln um ihn herum.

DEMO
- Ich denke, ich habe nie bemerkt dies, weil ich würde generell einfach die "click" - handler auf die <input>, nicht die Bezeichnung. Es ist merkwürdig Verhalten und ich bin mir nicht sicher, ich kann mir einen Grund denken, es wäre nützlich.
- Ich habe tatsächlich in dieser ein paar mal. Sehr ärgerlich ist.
- Sie könnte auch aufhören, event-propagation.
- Idealerweise binden würde ein change-Ereignis-handler statt. Ideal für Barrierefreiheit.
- Sie können nicht binden eine änderung handler zum label, soweit ich weiß.
- Oder legen Sie den Hörer auf die checkbox. 😉
- Ja, aber würden Sie müssen hinzufügen eine click-handler auf das Kontrollkästchen für diese.
- Ach ja, ich meinte den Eingang. Aber dann würde das problem nicht auftreten, sowieso (mit der click-Ereignis-handler).
- Ich nehme an, er hat es auf diese Weise, weil er etwas tun will, nur, wenn der Benutzer klickt auf das label, nicht die checkbox.
- Stoppen der Propagierung des Ereignisses wahrscheinlich nicht helfen würde. Soweit ich sagen kann, es sind zwei völlig getrennte Ereignisse, die generiert werden.
- Was würden Sie tun müssen ist, fügen Sie einen click-handler auf das Kontrollkästchen, und legen Sie stopPropagation in dass.
- Das Problem bei dieser Lösung ist, dass änderungen am markup wird erhebliche (und möglicherweise ganz unerwartete) Auswirkungen auf das Verhalten des Skripts.
- Es gibt fast keine Unterschiede zwischen der Umhüllung ein Etikett und mit for. Dies ist wohl einer der wenigen. Siehe die verlinkte Frage.
- Im machen ein Imitator und ich brauche eine Lösung für dieses Problem: Was macht ein browser, ein anderes auszuführen, klicken Sie einmal auf input, wenn das Ereignis Blasen label? Ich mache einen Klick auf Aktion in der checkbox, aber wenn es Blasen auf dem Etikett der browser ein weiteres click-Ereignis am Eingang.
- Eines der wichtigsten Merkmale der Verwendung von Etiketten ist, dass Sie können klicken Sie auf das Etikett, und es wird behandelt, als hätten Sie klickte auf das zugehörige element. Es spielt keine Rolle, wie das Ereignis erreicht das label, indem Sie es direkt oder indem es brodelt von einem enthaltenen element.
- Ich habe gerade dieses problem, das erste mal. Das Kontrollkästchen out-of-label ist nicht eine option, wenn Sie die Verwendung von Bootstrap.
- Griff checkbox ändern Sie arbeitete sehr schön, danke @FelixKling 🙂
- In Bezug auf diese Frage: stackoverflow.com/questions/40368276/... diese Antwort beantwortet nicht die Frage. Mein label ist nicht umwickelt, um die Eingabe. Wie kann ich es beheben dann?
- Aber in Ihrem Fall setzen Sie den handler auf window, die wraps beide von Ihnen, so ist es im wesentlichen das gleiche. Beim klicken auf die Beschriftung der Blasen an die Fenster, und löst auch eine klicken Sie auf die checkbox, die Blasen an die Fenster.
- Siehe @RobG Antwort, wo er überprüft die Ereignis-Ziel zu sehen, welches element ist eigentlich immer der Fall.
- Vielleicht kannst du ändern <label> zu <div>
- Dann verlieren Sie sowohl die semantische Beziehung der text ist ein label für die checkbox-und auch das automatische Verhalten der Klick auf das label als ein proxy für das klicken auf die checkbox. Sie können es beheben, letztere mit extra-JS.
InformationsquelleAutor Barmar

Wenn Ihre Absicht ist, zu reagieren, nur um Klicks auf das Etikett, und nicht auf die checkbox, können Sie die Veranstaltung.Ziel Eigenschaft. Es verweist auf das element, dass heißt der Hörer, so dass, wenn der Klick nicht auf das element, nicht auf die Aktion:

window.onload = function(){
  var el = document.getElementById('wow');
  el.addEventListener('click', function(event) {

    if (this === event.target) {
      /* click was on label */
      alert('click was on label');

    } else {
      /* click was on checkbox */
      event.stopPropagation();
      return false;
    }

  }, false);
}

Wenn auf der anderen Seite wollen Sie nur reagieren auf Klicks auf die checkbox (wo ein Klick auf das label produziert auch ein Klick auf das Kästchen), dann tun das Gegenteil. Nichts für Klicks auf dem Etikett und lassen Sie diejenigen, die von der checkbox durch:

window.onload = function(){
  var el = document.getElementById('foolabel');
  el.addEventListener('click', function(event) {

    if (this === event.target) {
      /* click was on label */
      event.stopPropagation();
      return false;

    } else {

      /*
      ** click is from checkbox, initiated by click on label
      ** or checkbox                                  
      */

      alert('click from checkbox');
    }

  }, false);
}

Diese version scheint haben die meisten natürlichen Verhaltensweisen. Aber die Veränderung der markup, so dass die Beschriftung nicht mehr umschließt das Kontrollkästchen bedeutet, dass die listener nicht aufgerufen.

InformationsquelleAutor RobG

1

Veranstaltung Blase.

Die Kontrollkästchen der untergeordneten Knoten mit der Bezeichnung. Sie klicken Sie auf die checkbox. Event-bubble auf das Etikett. Dann Alarm pop-up zweimal.

Um zu verhindern, dass Alarm pop-up zweimal, wenn Sie klicken Sie auf die checkbox. Sie können ändern Sie die onclick-Funktion in diesem:
```
wow.onclick = function(e){
    alert('hi');
    stopBubble(e);
}


function stopBubble(e)  
{  
    if (e && e.stopPropagation)  
        e.stopPropagation()  
    else 
        window.event.cancelBubble=true 
}  
```
Hoffe, dass dies für Sie arbeiten kann.
- Ich glaube nicht, dass diese Antwort richtig ist. Ein event-handler auf die mit <label> tag erhalten sollten, sprudelte Ereignis nur einmal. Browser beiden "klicken Sie auf" Ereignisse, eins mit der <input> - element als target und eine mit der <label> als Ziel.
- Zwei mal pop-up. Kommt man von klicken Sie auf die Beschriftung. Die andere ist, klicken Sie auf die input-Blase auf dem Etikett. Ich denke, das kann das erklären.: )
- Nein, sprudelt nur um ein Ereignis-Objekt geliefert, um event-Handler auf übergeordnete Elemente. In diesem Fall wird das Ereignis-Objekt unterscheidet, auf der zwei mal der handler aufgerufen wird.
- Es funktioniert nicht: jsfiddle.net/barmar/fMMAz/5 Propagation von der Beschriftung auf das Kontrollkästchen ist nicht blubbern, es ist etwas sehr spezifisch für Etiketten.
- Das funktioniert: jsfiddle.net/barmar/fMMAz/5 @Barmar
- Nein ist es nicht. Ich klickte auf "Text" und habe zwei Warnungen in Chrome.
- AHAHAHAHAAHAHAH.... Ok, du hast Recht. Meine Schuld : ( awk
- Und @Pointy sorry Jungs, ich mischte dies : (
InformationsquelleAutor Tyler.z.yang
0

Das Label-tag wird im Zusammenhang mit den input-tag drin. Also, wenn Sie auf das Etikett, es wird auch trigger eine click-Ereignis für den Eingang, dann Blase auf das label selbst.

Sehen:
```
document.getElementById("winput").addEventListener('click', function(event){
     alert('input click');

     //stop bubble
     event.stopPropagation();

 }, false); 
```
http://jsfiddle.net/96vPP/
- Ich verwendet stopPropagation() und es hat nicht funktioniert
InformationsquelleAutor Andrew

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.